天天看點
傳回

jQuery執行個體——折疊菜單

  • 點選一級菜單，會彈出二級菜單，并且其他一級菜單會收縮。同時，點選的一級菜單箭頭方向會向下 
<!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>
jQuery執行個體——折疊菜單
jQuery+Ajax
上一篇: 使用easyUI的combobox下拉框控件實作輸入提示功能（google suggest）
下一篇: jQuery實作折疊菜單

繼續閱讀