JQ制作一个目录树菜单

上山打老虎

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>关于折叠菜单案例</title>
  <style>
    *{
      margin: 0;
      padding:0;
      font-family: "Microsoft YaHei";
    }
    li{
      list-style: none;
    }
    .container{
      width:200px;
      height:auto;
      margin: 30px auto;
      background: #444;
    }
    .menu > li > h1{
      color: #fff;
      font-size:18px;
      text-indent: 10px;
      cursor: pointer;
      border-bottom: 1px solid #ddd;
    }
    .menuList{
      display: none;
    }
    .menuList > li{
      color: #fff;
      text-indent: 30px;
      line-height: 30px;
      font-size:14px;
    }
    .hover{
      background: #360;
      cursor: pointer;
    }
  </style>
</head>
<body>
<div class="container">
  <ul class="menu">
    <li>
      <h1>菜单一</h1>
      <ul class="menuList" style="display: block">
        <li>菜单</li>
        <li>菜单</li>
        <li>菜单</li>
        <li>菜单</li>
      </ul>
    </li>
    <li>
      <h1>菜单二</h1>
      <ul class="menuList">
        <li>菜单</li>
        <li>菜单</li>
        <li>菜单</li>
        <li>菜单</li>
      </ul>
    </li>
    <li>
      <h1>菜单三</h1>
      <ul class="menuList">
        <li>菜单</li>
        <li>菜单</li>
        <li>菜单</li>
        <li>菜单</li>
      </ul>
    </li>
  </ul>
</div>
</body>
<script src="jquery-1.9.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
  $(function () {
    $(".menu > li > h1").on("click",function () {
      $(this).next("ul.menuList").stop().slideToggle(500).parent("li").siblings("li").children("ul.menuList").slideUp(500);
    })
    $(".menuList > li").hover(function () {
      $(this).addClass("hover");
    },function () {
      $(this).removeClass("hover");
    })
  })
</script>
</html>

运行效果

[jQuery] JQ制作一个目录树菜单

相关帖子

PPT图片形状如何更改？PPT更改图片形状的方法

使用lsd 和 exa 来重新想象和设计你的文件和目录列表

PHP7 Null合并运算符

利用CSS样式将网页变黑白色效果

nodejs如何查看版本

Excel 使用技巧 - 如何使光标所在行的数据自动变颜色

7种好看的鼠标点击效果

好看的CSS3滑动按钮特效

php实现超简的分页功能

PHP版贪吃蛇小游戏

上山打老虎 LV4