本文旨在解决在JavaScript中，当点击子菜单项时，如何为其父级`
`元素添加特定的CSS类，以保持菜单展开状态的问题。通过分析HTML结构和jQuery代码，提供了一种简洁有效的解决方案，确保用户在浏览子菜单时，父菜单始终保持可见。
问题分析
原始代码尝试使用.parent(‘nav-content collapse > ul’)来为父级
元素添加show类，但.parent()方法只会返回元素的直接父元素。在给定的HTML结构中，.sub类的元素的直接父元素是，而不是目标。因此，需要找到一种方法来访问的父元素，即。
解决方案
正确的解决方案是使用.parent()方法两次，以获取元素的父元素的父元素，也就是目标元素。
$(document).ready(function () { $('.sub').click(function () { $(this).parent().parent().addClass('show'); });});
这段代码首先选取所有class为sub的元素（即子菜单链接），然后绑定一个点击事件。当点击事件发生时，$(this)指向被点击的子菜单链接。.parent()方法第一次调用返回
元素，第二次调用返回元素。最后，.addClass(‘show’)为这个元素添加show类，从而保持菜单展开。
立即学习“Java免费学习笔记（深入）”；
完整示例
在这个示例中，当点击 “SubMenu1” 或 “submenu2” 链接时，其父级
元素将会被添加 show 类。
注意事项
确保引入 jQuery: 代码依赖 jQuery 库，确保在HTML文件中正确引入 jQuery。
CSS 定义: 确保 CSS 中定义了 .show 类的样式，以控制菜单的展开状态。例如：
.show { display: block; /* 或者其他合适的显示方式 */}
HTML 结构: 代码依赖特定的 HTML 结构。如果 HTML 结构发生变化，可能需要调整 JavaScript 代码。
唯一ID: 如果有多个相同ID的ul，会造成冲突，请确保id=”econ-nav”是唯一的，或者使用其他选择器。
总结
通过使用.parent().parent()方法，我们可以轻松地访问到子菜单链接的父级
元素，并为其添加相应的CSS类，从而实现点击子菜单项时保持父菜单展开的效果。 这种方法简单有效，适用于各种需要控制菜单展开状态的场景。
以上就是JavaScript：点击子菜单项时为父级UL添加Class的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1587021.html
微信扫一扫 
支付宝扫一扫 
