本文旨在解决在JavaScript中，当点击子菜单项时，如何为其父级`
- `元素添加特定的CSS类，以保持菜单展开状态的问题。通过分析HTML结构和jQuery代码，提供了一种简洁有效的解决方案，确保用户在浏览子菜单时，父菜单始终保持可见。
问题分析
原始代码尝试使用.parent('nav-content collapse > ul')来为父级<ul>元素添加show类，但.parent()方法只会返回元素的直接父元素。在给定的HTML结构中，.sub类的<a>元素的直接父元素是<li>，而不是目标<ul>。因此，需要找到一种方法来访问<li>的父元素，即<ul>。
解决方案
正确的解决方案是使用.parent()方法两次，以获取<a>元素的父元素的父元素，也就是目标<ul>元素。
$(document).ready(function () {
$('.sub').click(function () {
$(this).parent().parent().addClass('show');
});
});这段代码首先选取所有class为sub的元素（即子菜单链接），然后绑定一个点击事件。当点击事件发生时，$(this)指向被点击的子菜单链接。.parent()方法第一次调用返回<li>元素，第二次调用返回<ul>元素。最后，.addClass('show')为这个<ul>元素添加show类，从而保持菜单展开。
立即学习“Java免费学习笔记（深入）”；
完整示例
<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>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function () {
$('.sub').click(function () {
$(this).parent().parent().addClass('show');
});
});
</script>在这个示例中，当点击 "SubMenu1" 或 "submenu2" 链接时，其父级 <ul> 元素将会被添加 show 类。
注意事项
确保引入 jQuery: 代码依赖 jQuery 库，确保在HTML文件中正确引入 jQuery。
-
CSS 定义: 确保 CSS 中定义了 .show 类的样式，以控制菜单的展开状态。例如：
.show { display: block; /* 或者其他合适的显示方式 */ } HTML 结构: 代码依赖特定的 HTML 结构。如果 HTML 结构发生变化，可能需要调整 JavaScript 代码。
唯一ID: 如果有多个相同ID的ul，会造成冲突，请确保id="econ-nav"是唯一的，或者使用其他选择器。
总结
通过使用.parent().parent()方法，我们可以轻松地访问到子菜单链接的父级<ul>元素，并为其添加相应的CSS类，从而实现点击子菜单项时保持父菜单展开的效果。 这种方法简单有效，适用于各种需要控制菜单展开状态的场景。
