JavaScript：点击子菜单项时为父级UL添加Class以保持菜单展开-html教程-PHP中文网

JavaScript：点击子菜单项时为父级UL添加Class以保持菜单展开

花韻仙語

发布： 2025-10-21 11:42:28

原创

903人浏览过

javascript：点击子菜单项时为父级ul添加class以保持菜单展开

本文旨在解决在JavaScript中，点击子菜单项后，如何通过添加Class到父级UL元素，从而保持该父级菜单始终展开的问题。我们将通过分析HTML结构和JavaScript代码，提供清晰的解决方案，并解释关键步骤，确保读者能够理解并应用到自己的项目中。

问题分析

在侧边栏或导航菜单中，通常会使用嵌套的<ul>和<li>元素来构建层级结构。当点击子菜单项时，我们希望其父级菜单（即包含该子菜单项的<ul>元素）保持展开状态，而不是自动折叠。这可以通过在点击事件发生时，向父级<ul>元素添加特定的Class来实现。

解决方案

考虑到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>

登录后复制

其中，.sub类应用于子菜单项的<a>标签，nav-content collapse 类应用于包含子菜单项的<ul>标签。我们需要在点击.sub时，为父级的<ul>元素添加show类。

立即学习“Java免费学习笔记（深入）”；

表单大师AI

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

查看详情

正确的JavaScript代码如下：

$(document).ready(function () {
    $('.sub').click(function (e) {
        // 阻止默认链接行为，避免页面跳转
        e.preventDefault();

        // 查找父级的父级元素（即<ul>元素）并添加 'show' 类
        $(this).parent().parent().addClass('show');

        // 或者，使用更健壮的查找方式，避免依赖于特定的HTML结构
        $(this).closest('.nav-content.collapse').addClass('show');
    });
});

登录后复制

代码解释：

$(document).ready(function () { ... });：确保DOM加载完成后执行JavaScript代码。
$('.sub').click(function (e) { ... });：为所有.sub类元素绑定点击事件。
e.preventDefault();：阻止默认的链接跳转行为，确保页面不刷新。
$(this).parent().parent().addClass('show');：
- $(this)：指代被点击的.sub元素。
- .parent()：获取.sub元素的直接父元素，即<li>元素。
- .parent()：再次调用.parent()，获取<li>元素的父元素，即目标<ul>元素。
- .addClass('show');：为目标<ul>元素添加show类，从而使其保持展开状态。
$(this).closest('.nav-content.collapse').addClass('show');：
- closest() 方法从当前元素开始，沿 DOM 树向上遍历，直到找到匹配给定选择器的第一个元素。
- 这种方式更健壮，因为它不依赖于固定的 HTML 结构，即使 HTML 结构发生变化，代码仍然可以正常工作。

注意事项：

确保引入了 jQuery 库。
.show 类需要配合 CSS 样式来控制菜单的显示与隐藏。通常，.show 类会设置 display: block; 或其他合适的显示方式。
HTML结构可能因项目而异，请根据实际情况调整.parent()的调用次数或使用.closest()方法。
如果使用了Bootstrap等框架，可能需要考虑框架自身的菜单展开/折叠机制，并进行相应的调整。
e.preventDefault(); 非常重要，它可以阻止点击链接后的默认跳转行为，避免页面刷新。

总结

通过上述方法，我们可以在点击子菜单项时，动态地向父级<ul>元素添加show类，从而实现保持菜单展开的效果。这种方法简单有效，并且易于理解和应用。在实际项目中，请根据具体情况调整代码，并确保CSS样式与JavaScript代码协同工作，以达到最佳效果。使用 .closest() 方法可以使代码更健壮，避免依赖于特定的 HTML 结构。

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