jQuery实例——折叠菜单

最新推荐文章于 2023-04-15 14:00:30 发布

jwz934738949

最新推荐文章于 2023-04-15 14:00:30 发布

阅读量1.5k

点赞数 1

分类专栏： jQuery+Ajax

本文链接：https://blog.csdn.net/jwz934738949/article/details/108363486

版权

jQuery+Ajax 专栏收录该内容

38 篇文章 0 订阅

订阅专栏

点击一级菜单，会弹出二级菜单，并且其他一级菜单会收缩。同时，点击的一级菜单箭头方向会向下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>折叠菜单</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .nav {
      list-style: none;
      width: 300px;
      margin: 100px auto;
    }

    .nav > li {
      border: 1px solid #000;
      line-height: 35px;
      border-bottom: none;
      text-indent: 2em;
      position: relative;
    }

    .nav > li:first-child {
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
    }

    .nav > li:last-child {
      border-bottom: 1px solid #000;
      border-bottom-left-radius: 10px;
      border-bottom-right-radius: 10px;
    }

    .nav > li > span {
      background: url("images/arrow_right.png") no-repeat center center;
      background-size: cover;
      display: inline-block;
      width: 32px;
      height: 32px;
      position: absolute;
      right: 10px;
      top: 2px;
    }

    .nav > .current > span {
      transform: rotate(90deg);
    }

    .sub {
      display: none;
    }

    .sub > li {
      list-style: none;
      background-color: antiquewhite;
      border-bottom: 1px solid #fff;
    }

    .sub > li:hover {
      background-color: darkgrey;
    }

  </style>
  <script src="./js/jquery-3.5.1.js"></script>
  <script>
    $(function () {
      // 监听一级菜单点击事件
      $(".nav>li").click(function () {
        // 获取一级菜单下的二级菜单
        const $sub = $(this).children(".sub")
        // 展开二级菜单
        $sub.slideDown(1000)
        // 获取其他非当前二级菜单
        const $otherSub = $(this).siblings().children(".sub")
        // 收缩其他二级菜单
        $otherSub.slideUp(1000)
        // 让点击的一级菜单箭头旋转
        $(this).addClass("current")
        // 让其他一级菜单的箭头恢复正常
        $(this).siblings().removeClass("current")
      })
    })
  </script>
</head>
<body>
<ul class="nav">
  <li>一级菜单<span></span>
    <ul class="sub">
      <li>二级菜单</li>
      <li>二级菜单</li>
      <li>二级菜单</li>
      <li>二级菜单</li>
      <li>二级菜单</li>
    </ul>
  </li>
  <li>一级菜单<span></span>
    <ul class="sub">
      <li>二级菜单</li>
      <li>二级菜单</li>
      <li>二级菜单</li>
      <li>二级菜单</li>
      <li>二级菜单</li>
    </ul>
  </li>
  <li>一级菜单<span></span>
    <ul class="sub">
      <li>二级菜单</li>
      <li>二级菜单</li>
      <li>二级菜单</li>
      <li>二级菜单</li>
      <li>二级菜单</li>
    </ul>
  </li>
  <li>一级菜单<span></span>
    <ul class="sub">
      <li>二级菜单</li>
      <li>二级菜单</li>
      <li>二级菜单</li>
      <li>二级菜单</li>
      <li>二级菜单</li>
    </ul>
  </li>
  <li>一级菜单<span></span>
    <ul class="sub">
      <li>二级菜单</li>
      <li>二级菜单</li>
      <li>二级菜单</li>
      <li>二级菜单</li>
      <li>二级菜单</li>
    </ul>
  </li>
  <li>一级菜单<span></span>
    <ul class="sub">
      <li>二级菜单</li>
      <li>二级菜单</li>
      <li>二级菜单</li>
      <li>二级菜单</li>
      <li>二级菜单</li>
    </ul>
  </li>
  <li>一级菜单<span></span>
    <ul class="sub">
      <li>二级菜单</li>
      <li>二级菜单</li>
      <li>二级菜单</li>
      <li>二级菜单</li>
      <li>二级菜单</li>
    </ul>
  </li>
</ul>
</body>
</html>

在这里插入图片描述

jwz934738949

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
jQuery实例——折叠菜单

点击一级菜单，会弹出二级菜单，并且其他一级菜单会收缩。同时，点击的一级菜单箭头方向会向下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>折叠菜单</title> <style> * { margin: 0; padding: 0; } .nav { lis.
复制链接

扫一扫