demo-多级导航菜单（jQuery）

最新推荐文章于 2021-09-08 17:51:20 发布

咩有猫腻.

最新推荐文章于 2021-09-08 17:51:20 发布

阅读量403

点赞数

分类专栏： demo

本文链接：https://blog.csdn.net/DcTbnk/article/details/106722325

版权

demo 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

一.demo

在这里插入图片描述
css

html

js

<!-- js -->
    <script src="./course29/jquery.js"></script>
    <script>
        $(function () {
            $('li:has(ol)').click(function (e) {
                // target 显示点击元素的标签名
                if ($(e.target).children().length) {
                    // 这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式隐藏或显示。
                    $(this).children().slideToggle();
                }
                // 防止事件冒泡到DOM树上，也就是不触发的任何前辈元素上的事件处理函数,但这不会阻止同一个元素上的其它事件处理函数的运行
                e.stopPropagation();
            });
        });
    </script>

二.demo

在这里插入图片描述

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
  </head>
  <style type="text/css">
    ul li {
      list-style: none;
    }
    li ul {
      display: none;
    }

    .minus {
      list-style-image: url(img/minus.gif);
    }
    .plus {
      list-style-image: url(img/plus.gif);
    }
  </style>

  <body>
    <ul>
      <li>
        主题市场
        <ul>
          <li>
            运动派
            <ul>
              <li>三级菜单a</li>
              <li>三级菜单b</li>
              <li>三级菜单c</li>
              <li>三级菜单d</li>
            </ul>
          </li>
          <li>
            有车族
            <ul>
              <li>
                三级
                <ul>
                  <li>四级</li>
                  <li>四级</li>
                  <li>四级</li>
                </ul>
              </li>
              <li>三级</li>
              <li>三级</li>
              <li>三级</li>
            </ul>
          </li>
          <li>生活家</li>
        </ul>
      </li>
      <li>
        特色购物
        <ul>
          <li>淘宝二手</li>
          <li>拍卖会</li>
          <li>爱逛街</li>
          <li>全球购</li>
          <li>淘女郎</li>
        </ul>
      </li>
      <li>
        优惠促销
        <ul>
          <li>天天特价</li>
          <li>免费试用</li>
          <li>清仓</li>
          <li>1元起拍</li>
        </ul>
      </li>
      <li>工具</li>
    </ul>
    <script
      src="js/jquery-1.11.0.js"
      type="text/javascript"
      charset="utf-8"
    ></script>
    <script type="text/javascript">
      $(function () {
        //给有ul的li加下图标（添加类名）
        $("li:has(ul)")
          .addClass("minus")
          //添加点击事件
          .click(function (e) {
            //看看直接点的那个li（事件源）有没有子元素
            if ($(e.target).children().length) {
              $(this).children().slideToggle();
              $(this).toggleClass("plus");
            }
            e.stopPropagation(); //阻止事件冒泡，目的只让当前这一层产生动画
          });
      });
    </script>
  </body>
</html>