天天看點
傳回

jQuery實作折疊菜單

jQuery實作折疊菜單

今天在觀看李南江老師的jQuery視屏時，正好遇到老師在講jQuery實作折疊菜單，但是老師的折疊菜單不是很完善在

這裡我對老師的代碼進行了修改，簡單的實作折疊菜單的基本效果（麻雀雖小，五張俱全）。先附上老師視訊的位址

(https://www.bilibili.com/video/av22807707?p=42)。 話不多少直接上代碼

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>折疊菜單</title>
  <script src="jQuery/jquery-3.4.1.min.js"></script>
  <script>
    $(function () {
      $(".nav>li").click(function () {
        var sub = $(this).children(".sub"); //擷取目前一級目錄的二級目錄

        sub.click(function () {  //阻止事件冒泡
          return false;
        })

        sub.stop().slideToggle(500, function () {
          // console.log(sub.css("display"))
          if (sub.css("display") == 'block') { //如果二級目錄是展示的狀态
            $(this).parent().addClass("current"); //将一級菜單的current加上(為了使箭頭向下)
          } else {
            $(".nav>li").removeClass("current") //将一級菜單的current去除(為了使箭頭回歸原位)
          }
        });
        $(this).siblings().children(".sub").slideUp(500); //将其他二級菜單隐藏

        //這裡為什麼要重複寫？你可以去掉看看效果對不對？
        $(".nav>li").removeClass("current")
        $(this).addClass("current");
      })
    })
  </script>

  <style>
    * {
      margin: 0px;
      padding: 0px;
      font-family: '微軟雅黑';
      font-size: 16px;
      color: #5e5e5e;
    }

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

    .nav>li {
      border: #ff6600 1px solid;
      line-height: 35px;
      border-bottom: none;
      position: relative;
    }

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

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

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

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

    .sub {
      list-style: none;
      display: none;
    }

    .sub>li {
      background: #09bddd;
      border-bottom: 1px solid white;
    }

    .sub li:hover {
      background: #03434e;
    }
  </style>
</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>
    <li>一級菜單 <span></span>
      <ul class="sub">
        <li>二級菜單</li>
        <li>二級菜單</li>
        <li>二級菜單</li>
        <li>二級菜單</li>
        <li>二級菜單</li>
      </ul>
    </li>
  </ul>
</body>

</html>

搞個效果圖看看

jQuery實作折疊菜單
javascript jquery
上一篇: jQuery執行個體——折疊菜單
下一篇: easyui treegrid 添加複選框

繼續閱讀