用jquery编写折叠菜单

折叠菜单

• 编写网页，设置CSS完成折叠菜单的结构和样式设置。

• 通过层级选择器、基本过滤选择器以及查找的方法获取指定的元素对象。

CSS页面代码：

<style>
    *{
      margin: 0;
      padding: 0;
    }
    ul li{
      list-style: none;
    }
    .menu{
      width: 150px;
      margin: 30px 500px;
      border: 1px solid #515e7b;
    }
    p{
      width: 100%;
      height: 40px;
      line-height: 40px;
      padding-left: 10px;
      box-sizing: border-box;
      background-color: #515e7b;
      color: #fff;
      border-bottom: 1px solid #fff;
    }
    .list{
      color: #000;
      height: 100px;
      font-size: 14px; 
    }
    .list li{
      height: 33px;
      line-height: 33px;
      padding-left: 10px;
      box-sizing: border-box;
    }
  </style>

HTML页面代码如下;

 <ul class="menu">
      <li>
        <p>信息管理</p>
        <ul class="list">
          <li>未读信息</li>
          <li>已读信息</li>
          <li>信息列表</li>
        </ul>  
      </li>
      <li>
        <p>商品管理</p>
        <ul class="list">
          <li>权限设置</li>
          <li>用户列表</li>
          <li>重置密码</li>
        </ul>  
      </li>
      <li>
        <p>用户管理</p>
        <ul class="list">
          <li>权限设置</li>
          <li>用户列表</li>
          <li>重置密码</li>
        </ul>  
      </li>
    </ul>

引入JS代码：

<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
 	$(function(){
				$(".menu ul").hide();
				$(".menu>li>p").click(function(){
        $(".menu>li>ul").slideUp();
				$(this).next().slideToggle();
				});
			});
</script>

运行截图如下：