jQuery制作树形图（多级菜单）

一个W牛

已于 2023-09-06 11:52:55 修改

阅读量702

点赞数 2

文章标签： jquery 前端 javascript

于 2023-09-06 11:44:59 首次发布

本文链接：https://blog.csdn.net/qq_45587547/article/details/132712161

版权

完整代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>树形动画</title>
  <!-- 这里的jquery.js你需要去外部引用 -->
  <script src="./jquery.js"></script>
  <style type="text/css">
    ul li {
      list-style: none;
    }

    li ul {
      display: none;
    }

    .plus {
      /* 加号的图片 */
      list-style-image: url(img/plus.gif);
    }

    .minus {
      /* 减号的图片 */
      list-style-image: url(img/minus.gif);
    }
  </style>
</head>

<body>
  <ul id="zong">
    <li class="expand">主题市场
      <ul>
        <li class="expand">运动派
          <ul>
            <li>三级菜单a</li>
            <li>三级菜单b</li>
            <li>三级菜单c</li>
            <li>三级菜单d</li>
          </ul>
        </li>

        <li class="expand">有车族
          <ul>
            <li class="expand">三级
              <ul>
                <li>四级菜单a</li>
                <li>四级菜单b</li>
                <li>四级菜单c</li>
              </ul>
            </li>

            <li>三级</li>
            <li>三级</li>
            <li>三级</li>
          </ul>
        </li>

        <li>生活家</li>
      </ul>
    </li>

    <li class="expand">特色购物
      <ul>
        <li>淘宝二手</li>
        <li>拍卖会</li>
        <li>爱逛街</li>
        <li>全球购</li>
        <li>淘女郎</li>
      </ul>
    </li>


    <li class="expand">优惠促销
      <ul>
        <li>天天特价</li>
        <li>免费试用</li>
        <li>清仓</li>
        <li>1元起拍</li>
      </ul>
    </li>

    <li class="expand">工具</li>
  </ul>
  <script>
      //要给有ul的li添加一个类名plus，单击时展开收缩切换同时类名切换
    $(function () {
      $(document).ready(function () {
        $("li").has('ul').addClass("plus").click(function (e) {
          e.stopPropagation();
          if (e.target.children.length) {
            $(this).children().slideToggle();
            $(this).toggleClass("minus");
          }
        })
        // 点击其他地方收起当前菜单
        $(document).click(function (e) {
          var target = $(e.target);
          if (!target.closest("#zong li").length) {
            $("#zong ul").slideUp();
          }
        });
      });
    })
  </script>
</body>

</html>