如何选中相同类名下的单个元素，实现导航栏对应子菜单切换

问题原因 #

• 事件回调中使用jQuery('.toggle-sub-menu')会选中页面内所有同class的toggle按钮，而非当前触发点击的元素
• 箭头函数没有独立的this指向，无法通过this获取当前点击的DOM元素
• .closest()是向上查找祖先元素的方法，你的.sub-menu是.toggle-sub-menu同级节点的子元素，直接查找无法匹配

修正方案 #

写法1：使用普通函数（推荐） #

jQuery('.toggle-sub-menu').click(function() {
    // 限定查找范围为当前点击按钮所属的一级菜单项
    jQuery(this).closest('.menu-item').find('.sub-menu').addClass('open');
    // 如果需要点击切换显示/隐藏，可替换为toggleClass
    // jQuery(this).closest('.menu-item').find('.sub-menu').toggleClass('open');
})

写法2：保留箭头函数，使用事件对象获取当前元素 #

jQuery('.toggle-sub-menu').click((e) => {
    jQuery(e.target).closest('.menu-item').find('.sub-menu').addClass('open');
})

实现逻辑 #

1. 通过this（普通函数场景）或e.target（箭头函数场景）精准获取当前被点击的toggle元素
2. 调用.closest('.menu-item')向上查找当前toggle所属的一级菜单项容器，将后续操作限定在该容器范围内
3. 调用.find('.sub-menu')在当前菜单项内向下查找对应的子菜单，不会影响其他菜单项的子菜单元素

内容的提问来源于stack exchange，提问作者elmgren