点击子菜单，添加父级Class并保持展开

正确的JavaScript代码如下：

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

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

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

代码解释：

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

注意事项：

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

总结

通过上述方法，我们可以在点击子菜单项时，动态地向父级

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

以上就是《点击子菜单，添加父级Class并保持展开》的详细内容，更多关于的资料请关注golang学习网公众号！