本文旨在解决在点击具有链接的子菜单项时，如何使用 JavaScript 保持其父级 `
- ` 元素展开的问题。通过使用 jQuery 提供的 `.parent()` 方法，我们可以轻松地访问并操作父级元素，从而实现所需的功能。本文将提供详细的代码示例和解释，帮助开发者理解并应用该技术。
实现原理
当点击子菜单项（具有 .sub 类）时，我们需要找到其父级的 <ul> 元素，并为其添加 show 类。通过添加 show 类，我们可以控制该 <ul> 元素的显示状态，从而保持菜单展开。jQuery 的 .parent() 方法可以帮助我们逐级向上查找父级元素。
代码实现
以下是使用 jQuery 实现该功能的代码：
$(document).ready(function () {
$('.sub').click(function () {
$(this).parent().parent().addClass('show');
});
});代码解释：
立即学习“Java免费学习笔记（深入）”；
- $(document).ready(function () { ... });：确保在 DOM 加载完成后执行代码。
- $('.sub').click(function () { ... });：为所有具有 .sub 类的元素绑定点击事件。
- $(this)：表示当前被点击的元素（即子菜单项）。
- $(this).parent()：获取当前元素的直接父元素，在本例中是 <li> 元素。
- $(this).parent().parent()：再次调用 .parent()，获取 <li> 元素的父元素，即 <ul> 元素。
- .addClass('show')：为找到的 <ul> 元素添加 show 类，使其展开。
HTML 结构示例
为了更好地理解代码，以下是 HTML 结构的示例：
<li class="nav-item">
<a class="nav-link collapsed" data-bs-target="#econ-nav" data-bs-toggle="collapse" href="#">
<i class="bi bi-bar-chart"></i><span>finance</span><i class="bi bi-chevron-down ms-auto"></i>
</a>
<ul id="econ-nav" class="nav-content collapse" data-bs-parent="#sidebar-nav">
<li>
<a class="sub" href="submeni1.html">
<i class="bi bi-circle"></i><span>SubMenu1</span>
</a>
</li>
<li>
<a class="sub" href="submenu2.html">
<i class="bi bi-circle"></i><span>submenu2</span>
</a>
</li>
</ul>
</li>在这个结构中，.sub 类应用于子菜单的 <a> 标签，其父级是 <li> 标签，<li> 标签的父级才是我们想要操作的 <ul> 标签。
注意事项
确保引入 jQuery： 该代码依赖于 jQuery 库，请确保在 HTML 文件中引入 jQuery。
-
CSS 样式： show 类应该在 CSS 中定义，用于控制 <ul> 元素的显示状态。例如：
.show { display: block; /* 或者其他合适的显示方式 */ } 选择器准确性： 请确保 .sub 类选择器准确地匹配到你的子菜单项。
动态添加的元素： 如果子菜单项是动态添加的，需要在添加后重新绑定点击事件。可以使用 $(document).on('click', '.sub', function() { ... }); 来处理动态添加的元素。
总结
通过使用 jQuery 的 .parent() 方法，我们可以轻松地访问并操作子菜单项的父级 <ul> 元素，从而实现在点击子菜单项时保持父级菜单展开的功能。在实际应用中，请注意引入 jQuery 库，并根据实际情况调整 CSS 样式和选择器。 理解 DOM 结构和 jQuery 选择器是解决此类问题的关键。
