jquery 左侧下拉菜单

最新推荐文章于 2024-08-17 23:24:44 发布

小小米粒吖

最新推荐文章于 2024-08-17 23:24:44 发布

阅读量1.6k

点赞数 2

文章标签： html jquery 下拉菜单

本文链接：https://blog.csdn.net/weixin_41472431/article/details/84060564

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>实现菜单的下拉</title>
	<style>
	  div{width:200px;height:300px;border:1px solid #000;background-color:#cacfd6;}
	  ul{ list-style:none; }
	  li .submenu{margin-left: -30px;
    line-height: 30px;}/* background-color:#9abbd8;   #b0bac7*/
	 li .active{background-color:#b0bac7}
	</style>
</head>
<body>
  <div>
    <ul>
	<!-- 第一项菜单-->
	  <li>
	  <a id="dropmenu">一级 1</a>
	   <ul style="display:none">
	    <li class="submenu">二级 一.1</li>
		<li class="submenu">二级 一.2</li>
		<li class="submenu">二级 一.3</li>
		<li class="submenu">二级 一.4</li>
	   </ul>
	  </li>
     <!-- 第二项菜单 -->
	  <li>
	  <a class="dropmenu" >一级 2</a>
	    <ul style="display:none">
	    <li class="submenu">二级 二·1</li>
		<li class="submenu">二级 二·2</li>
		<li class="submenu">二级 二·3</li>
		<li class="submenu">二级 二·4</li>
	   </ul>
	  </li>
	  <!-- 第三项菜单 -->
	  <li>
	  <a class="dropmenu" >一级 3</a>
	    <ul style="display:none">
		<li class="submenu">二级 三.1</li>
		<li class="submenu">二级 三.2</li>
		<li class="submenu">二级 三.3</li>
		<li class="submenu">二级 三.4</li>
	   </ul>
	  </li>
	  
	</ul>
  </div> 

  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  <script>
     //菜单的展开和收回
     $('a').click(function(){
		 var li_list=$(this).next();
		 var otherli_list = $("a").next().not($(this).next());
         otherli_list.hide();
		 li_list.toggle(500);
	 });
   //添加样式
     $("li[class='submenu']").click(function(){
	  $("li").next().siblings().removeClass('active');
      $(this).removeClass('active');
      $(this).addClass('active');
	});

 
  </script>
</body>
</html>