点击子元素为非直接父元素添加/移除类的jQuery问题

AI 小北

2026-7-8

问题：点击菜单子项切换非关联元素CSS类无效果

原可运行的hover实现代码

原本通过鼠标悬停.has-children元素时，为非直接父元素.header-jr添加/移除类，代码正常工作：

<script>
jQuery(document).ready(function() {
     jQuery('.has-children').hover(function(){     
           jQuery('.header-jr').addClass('br-top-only');    
       },function(){    
          jQuery('.header-jr').removeClass('br-top-only');     
       });
   });
</script>

尝试的无效click代码

改为点击触发后无任何效果（控制台无报错），尝试的代码如下：

<script>
jQuery(document).ready(function() {
     jQuery('.has-children').click(function(){     
           jQuery('.header-jr').addClass('br-top-only');    
       },function(){    
          jQuery('.header-jr').removeClass('br-top-only');     
       });
   });
</script>

无效原因说明

jQuery的click()方法仅支持单个回调函数，不像hover()可以传入两个分别对应移入、移出的回调。上述代码中第二个移除类的回调不会被执行，点击只会添加类，无法实现切换效果。

可行解决方案

以下代码可实现点击.has-children时切换类，点击页面其他区域移除类的需求：

jQuery(document).ready(function() {
   jQuery('.has-children').on('click', function(event){  
       jQuery('.header-jr').toggleClass('br-top-only');    
   });
});

jQuery(document).click(function(e) {                    
   if(!jQuery(e.target).hasClass('has-children') )
   {
       jQuery('.header-jr').removeClass('br-top-only');               
   }
});