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

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

元素添加 "show" 类。

HTML 结构

首先，我们假设你的 HTML 结构如下：

<li class="n*-item">
    <a class="n*-link collapsed" data-bs-target="#econ-n*" 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-n*" class="n*-content collapse" data-bs-parent="#sidebar-n*">
        <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="n*-item">
    <a class="n*-link collapsed" data-bs-target="#econ-n*" 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-n*" class="n*-content collapse" data-bs-parent="#sidebar-n*">
        <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>

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

J*aScript 代码 (jQuery)

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

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

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

代码解释:

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

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

MarsCode

字节跳动旗下的免费AI编程工具

339 查看详情

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

元素。

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

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

代码解释:

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

注意事项

• CSS 样式： 确保你的 CSS 样式中定义了 .show 类的样式，以控制菜单的展开效果。例如：

  .n*-content.show {
      display: block; /* 或者其他适合你的布局的样式 */
  }

• Bootstrap Collapse 组件： 如果你的项目使用了 Bootstrap 的 Collapse 组件，可能需要调整代码以与 Bootstrap 的行为保持一致。 Bootstrap 的 Collapse 组件通常使用 show 类来控制元素的显示和隐藏。 如果你的菜单已经使用了 Bootstrap 的 Collapse 组件，则可能不需要手动添加 show 类，而是应该触发 Bootstrap 的 Collapse 事件。

• 多个菜单： 如果你的页面上有多个菜单，并且它们的 id 都是 #econ-n*，那么你需要修改 HTML 结构，为每个菜单分配唯一的 id。 否则，J*aScript 代码可能会影响到所有菜单。

总结

本文介绍了如何使用 J*aScript 和 jQuery 实现点击导航菜单子项时，保持其父级

元素展开的功能。通过监听子菜单项的点击事件，并为相应的父级
元素动态添加 "show" 类，可以实现菜单的持久展开效果。 同时，也提供了更健壮的实现方式，以及使用 Bootstrap Collapse 组件时的注意事项。

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

# css  # javascript  # java  # jquery  # html  # bootstrap  # 点击事件  # 菜单项  # 为父  # 表单  # 这一  # 多个  # 单选框  # 找到了  # 并为  # 如何使用  # 其父  # 淮海中路街道网站建设  # 垫江县电商seo  # 漫画网站推广效果好吗  # 青岛正规seo推广平台  # 秦志强seo教程  # 东门自动网站优化  # 井陉营销型网络推广方案  # 营销型网站推广页  # 正规的网站排名优化  # 什邡新闻营销推广