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

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

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

<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 是父级列表项，<a> 标签用于触发菜单的展开/折叠，.nav-content 和 .collapse 类控制菜单的初始状态（折叠），而 .sub 类则应用于子菜单项的 <a> 标签。

JavaScript 代码 (jQuery)

以下是使用 jQuery 实现点击子菜单项时，为父级 <ul> 元素添加 "show" 类的代码：

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

代码解释:

1. $(document).ready(function () { ... });： 确保在文档加载完成后执行代码。
2. $('.sub').click(function () { ... });： 为所有带有 .sub 类的元素（即子菜单项的 <a> 标签）绑定点击事件。
3. $(this)： 在点击事件处理函数中，$(this) 指代当前被点击的元素（即子菜单项的 <a> 标签）。
4. $(this).parent()： 获取当前元素的直接父元素，即 <li> 元素。
5. $(this).parent().parent()： 再次获取父元素，即 <ul> 元素。
6. .addClass('show')： 为获取到的 <ul> 元素添加 "show" 类。

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

表单大师AI

一款基于自然语言处理技术的智能在线表单创建工具，可以帮助用户快速、高效地生成各类专业表单。

74

查看详情

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

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

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

代码解释:

1. $(this).closest('.nav-content')：从当前元素开始，向上查找最近的具有 .nav-content 类的祖先元素。 这比假设固定的父元素层级更可靠。
2. 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 代码可能会影响到所有菜单。

总结

本文介绍了如何使用 JavaScript 和 jQuery 实现点击导航菜单子项时，保持其父级 <ul> 元素展开的功能。通过监听子菜单项的点击事件，并为相应的父级 <ul> 元素动态添加 "show" 类，可以实现菜单的持久展开效果。 同时，也提供了更健壮的实现方式，以及使用 Bootstrap Collapse 组件时的注意事项。

以上就是保持导航菜单展开：点击子菜单项时为父级UL添加“show”类的详细内容，更多请关注php中文网其它相关文章！