JavaScript：点击子菜单项时为父级UL添加Class

本文旨在解决在JavaScript中，当点击子菜单项时，如何为其父级`

`元素添加特定的CSS类，以保持菜单展开状态的问题。通过分析HTML结构和jQuery代码，提供了一种简洁有效的解决方案，确保用户在浏览子菜单时，父菜单始终保持可见。

问题分析

原始代码尝试使用.parent('nav-content collapse > ul')来为父级

元素添加show类，但.parent()方法只会返回元素的直接父元素。在给定的HTML结构中，.sub类的元素的直接父元素是
• ，而不是目标
  。因此，需要找到一种方法来访问
  • 的父元素，即
    。

    解决方案

    正确的解决方案是使用.parent()方法两次，以获取元素的父元素的父元素，也就是目标

    元素。

    $(document).ready(function () {
        $('.sub').click(function () {
            $(this).parent().parent().addClass('show');
        });
    });

    这段代码首先选取所有class为sub的元素（即子菜单链接），然后绑定一个点击事件。当点击事件发生时，$(this)指向被点击的子菜单链接。.parent()方法第一次调用返回

    • 元素，第二次调用返回
      元素。最后，.addClass('show')为这个
      元素添加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" 链接时，其父级


Reecho睿声
Reecho AI：超拟真语音合成与瞬时语音克隆平台
下载
元素将会被添加 show 类。

注意事项

1. 确保引入 jQuery: 代码依赖 jQuery 库，确保在HTML文件中正确引入 jQuery。

2. CSS 定义: 确保 CSS 中定义了 .show 类的样式，以控制菜单的展开状态。例如：

   .show {
       display: block; /* 或者其他合适的显示方式 */
   }

3. HTML 结构: 代码依赖特定的 HTML 结构。如果 HTML 结构发生变化，可能需要调整 JavaScript 代码。

4. 唯一ID: 如果有多个相同ID的ul，会造成冲突，请确保id="econ-nav"是唯一的，或者使用其他选择器。

总结

通过使用.parent().parent()方法，我们可以轻松地访问到子菜单链接的父级

元素，并为其添加相应的CSS类，从而实现点击子菜单项时保持父菜单展开的效果。 这种方法简单有效，适用于各种需要控制菜单展开状态的场景。