本文针对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:
<!DOCTYPE html> <html lang="en"> <head> <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"> </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> </html>
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，可以有效地解决嵌套列表菜单中底部元素位置错误的问题。这种方法简单易懂，并且能够适应各种复杂的菜单结构。在实际开发中，可以根据具体需求进行适当的调整和优化，以实现最佳的显示效果。
评论（已关闭）
评论已关闭