串列項未自行調整到選單底部-有解無憂

我創建了一個嵌套串列選單。問題是，當我添加第二個嵌套串列時，第一組串列元素中的最后一個 li 元素不會調整它從頁面頂部的高度以考慮第二個 ul('.sub-2 '）。它出現在左側，但不在 ul 下方。如何獲取最后一個鏈接（'.last-link'）以說明第二個 ul 的高度，使其顯示在 ul 下方。

$(document).ready(function() {
  $('#submen-1').on('click', function(e) {
    $('.sub-1').toggleClass("active");
    e.stopPropagation();
  })
  
  $('#submen-2').on('click', function() {
    if ($('.sub-2').hasClass("active")) {
      $('.sub-2').removeClass("active");
    } else {
      $('.sub-2').addClass("active");
    }
  })
});

* {
  box-sizing: border-box;
}

body {
  height: 100vh;
}

nav {
  height: 10vh;
}

ul {
  list-style-type: none;
}

.sub-1 {
  height: 0px;
  visibility: hidden;
}

.sub-2 {
  height: 0px;
  visibility: hidden;
}

.active {
  height: 55px;
  visibility: visible;
}

.height {
  display: block;
  position: relative;
  top: 55.5px;
}

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
  <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
  <script src="https://kit.fontawesome.com/36947df53d.js" crossorigin="anonymous"></script>
</head>

<body>
  <nav>
    <a href="#" id="btn"><i class="fa-solid fa-bars"></i></a>

    <ul class="main">
      <li><a href="contact.html">Link</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#" id="submen-1">Sub</a>
        <ul class="sub-1">
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#" id="submen-2">Sub-2</a>
            <ul class="sub-2">
              <li><a href="#">Link</a></li>
              <li><a href="#">Link</a></li>
              <li><a href="#">Link</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li><a href="#" id="last-link">Last Link</a></li>
    </ul>
  </nav>

  <script src="script.js"></script>
</body>

uj5u.com熱心網友回復：

將高度設定為 55px 將第二個子級別限制為僅此，而不考慮具有另一個 55px 的第三個子選單。而不是將高度設定為 55 像素，而是將其設定為自動。

$(document).ready(function() {
  $('#submen-1').on('click', function(e) {
    $('.sub-1').toggleClass("active");
    e.stopPropagation();
  })
  
  $('#submen-2').on('click', function() {
    if ($('.sub-2').hasClass("active")) {
      $('.sub-2').removeClass("active");
    } else {
      $('.sub-2').addClass("active");
    }
  })
});

* {
  box-sizing: border-box;
}

body {
  height: 100vh;
}

nav {
  height: 10vh;
}

ul {
  list-style-type: none;
}

.sub-1 {
  height: 0px;
  visibility: hidden;
}

.sub-2 {
  height: 0px;
  visibility: hidden;
}

.active {
  height: auto;
  visibility: visible;
}

.height {
  display: block;
  position: relative;
  top: 55.5px;
}

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
  <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
  <script src="https://kit.fontawesome.com/36947df53d.js" crossorigin="anonymous"></script>
</head>

<body>
  <nav>
    <a href="#" id="btn"><i class="fa-solid fa-bars"></i></a>

    <ul class="main">
      <li><a href="contact.html">Link</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#" id="submen-1">Sub</a>
        <ul class="sub-1">
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#" id="submen-2">Sub-2</a>
            <ul class="sub-2">
              <li><a href="#">Link</a></li>
              <li><a href="#">Link</a></li>
              <li><a href="#">Link</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li><a href="#" id="last-link">Last Link</a></li>
    </ul>
  </nav>

  <script src="script.js"></script>
</body>

轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/486788.html

標籤：javascript html css 列表菜单

上一篇：不明白這段代碼如何檢測長度

下一篇：如何獲得陣列的真實結果總數？