解決CSS嵌套列表菜單中底部元素位置錯誤的方案

本文針對CSS嵌套列表菜單中，當二級子菜單展開時，底部元素位置未正確調整的問題，提供了一種解決方案。通過將子菜單的固定高度設置為auto，使其能夠根據內容自動調整高度，從而解決底部元素位置不正確的問題。本文將詳細介紹該解決方案的實現方法，並提供相應的代碼示例。

問題分析

在構建嵌套列表菜單時，通常會使用CSS 來控制子菜單的顯示和隱藏。一種常見的做法是，初始狀態下將子菜單的高度設置為0，visibility 設置為hidden，當點擊父菜單項時，通過JavaScript 切換子菜單的active 類，將高度設置為一個固定值（例如55px），visibility 設置為visible，從而實現子菜單的展開和收起效果。

然而，當存在多級嵌套的子菜單時，如果內層子菜單的高度超過了外層子菜單的固定高度，就會導致底部元素的位置計算錯誤，無法正確顯示在最底部。這是因為外層子菜單的高度被限制為一個固定值，無法根據內層子菜單的高度自動調整。

解決方案

解決此問題的關鍵在於，避免為子菜單設置固定的高度值，而是讓其根據內容自動調整高度。具體來說，可以將CSS 中active 類的height 屬性設置為auto。

修改後的CSS 代碼如下：

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

通過將height 設置為auto，子菜單的高度將根據其內容自動調整，從而確保底部元素能夠正確顯示在最底部。

完整代碼示例

以下是包含完整HTML、CSS 和JavaScript 代碼的示例，展示瞭如何使用height: auto 來解決嵌套列表菜單中底部元素位置錯誤的問題。

HTML:

 


  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Nested Menu</title>
  <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>
  <link rel="stylesheet" href="style.css">


  <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>

CSS (style.css):

 * {
  box-sizing: border-box;
}

body {
  height: 100vh;
}

nav {
  height: 10vh;
}

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.sub-1 {
  height: 0;
  visibility: hidden;
  overflow: hidden; /* 確保內容隱藏*/
}

.sub-2 {
  height: 0;
  visibility: hidden;
  overflow: hidden; /* 確保內容隱藏*/
}

.active {
  height: auto;
  visibility: visible;
  overflow: visible; /* 確保內容顯示*/
}

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

/* 基礎樣式，可根據需要調整*/
.main > li {
  display: inline-block;
  margin-right: 20px;
}

.sub-1, .sub-2 {
  position: absolute; /* 或者relative，根據佈局需求*/
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  padding: 10px;
}

JavaScript (script.js):

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

  $('#submen-2').on('click', function() {
    $('.sub-2').toggleClass("active");
  });
});

注意事項：

• 確保在CSS 中為子菜單設置overflow: hidden，以便在初始狀態下隱藏內容。
• 根據實際佈局需求，調整子菜單的position 屬性（例如absolute 或relative）。
• 可以根據需要添加其他CSS 樣式，例如背景顏色、邊框、內邊距等，以美化菜單的外觀。

總結

通過將CSS 中子菜單的height 屬性設置為auto，可以有效地解決嵌套列表菜單中底部元素位置錯誤的問題。這種方法簡單易懂，並且能夠適應各種複雜的菜單結構。在實際開發中，可以根據具體需求進行適當的調整和優化，以實現最佳的顯示效果。

以上是解決CSS嵌套列表菜單中底部元素位置錯誤的方案的詳細內容。更多資訊請關注PHP中文網其他相關文章！