当前位置：首页 > 文章列表 > 文章 > 前端 > 点击子菜单自动展开父级导航菜单方法

点击子菜单自动展开父级导航菜单方法

2025-11-14 08:36:36 0浏览收藏

文章小白一枚，正在不断学习积累知识，现将学习到的知识记录一下，也是将我的所得分享给大家！而今天这篇文章《点击子菜单时自动展开父级UL，保持导航菜单展开状态》带大家来了解一下##content_title##，希望对大家的知识积累有所帮助，从而弥补自己的不足，助力实战开发！

保持导航菜单展开：点击子菜单项时为父级UL添加“show”类

本文旨在解决点击导航菜单子项时，保持其父级UL元素展开的问题。通过JavaScript代码，监听子菜单项的点击事件，并为相应的父级UL元素动态添加“show”类，从而实现菜单的持久展开效果。本文将提供详细的代码示例和解释，帮助开发者轻松实现这一功能。

在Web开发中，经常需要实现导航菜单的展开和折叠功能。一个常见的需求是，当用户点击某个子菜单项时，希望其对应的父级菜单保持展开状态，以便用户可以方便地访问同一层级的其他菜单项。本文将介绍如何使用 JavaScript (结合 jQuery) 实现这一功能，即点击子菜单项时，为父级

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>

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

在这个结构中，.nav-item 是父级列表项，标签用于触发菜单的展开/折叠，.nav-content 和 .collapse 类控制菜单的初始状态（折叠），而 .sub 类则应用于子菜单项的标签。

JavaScript 代码 (jQuery)

以下是使用 jQuery 实现点击子菜单项时，为父级

元素添加 "show" 类的代码：

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

代码解释:

$(document).ready(function () { ... });：确保在文档加载完成后执行代码。

$('.sub').click(function () { ... });：为所有带有 .sub 类的元素（即子菜单项的标签）绑定点击事件。
$(this)：在点击事件处理函数中，$(this) 指代当前被点击的元素（即子菜单项的标签）。
$(this).parent()：获取当前元素的直接父元素，即
元素。
$(this).parent().parent()：再次获取父元素，即
- .addClass('show')：为获取到的

改进版本（更健壮的实现）：

上面的代码假设 HTML 结构是固定的。为了使代码更健壮，可以添加一些额外的判断，以确保正确地找到父级

元素。

$(document).ready(function () {
    $('.sub').click(function () {
        // 向上查找，直到找到具有 'nav-content' 类的父元素
        let parentUl = $(this).closest('.nav-content');

        // 如果找到了父级 ul 元素，则添加 'show' 类
        if (parentUl.length) {
            parentUl.addClass('show');
        }
    });
});

代码解释:

$(this).closest('.nav-content')：从当前元素开始，向上查找最近的具有 .nav-content 类的祖先元素。这比假设固定的父元素层级更可靠。
if (parentUl.length)：检查是否找到了 .nav-content 元素。 closest() 方法返回一个 jQuery 对象，即使没有找到匹配的元素，也不会返回 null 或 undefined，而是返回一个空的 jQuery 对象。因此，使用 length 属性来判断是否找到了元素。

注意事项

CSS 样式： 确保你的 CSS 样式中定义了 .show 类的样式，以控制菜单的展开效果。例如：
```
.nav-content.show {
    display: block; /* 或者其他适合你的布局的样式 */
}
```
Bootstrap Collapse 组件： 如果你的项目使用了 Bootstrap 的 Collapse 组件，可能需要调整代码以与 Bootstrap 的行为保持一致。 Bootstrap 的 Collapse 组件通常使用 show 类来控制元素的显示和隐藏。如果你的菜单已经使用了 Bootstrap 的 Collapse 组件，则可能不需要手动添加 show 类，而是应该触发 Bootstrap 的 Collapse 事件。
多个菜单： 如果你的页面上有多个菜单，并且它们的 id 都是 #econ-nav，那么你需要修改 HTML 结构，为每个菜单分配唯一的 id。否则，JavaScript 代码可能会影响到所有菜单。