jquery - 使用 Bootstrap 数据悬停状态重置事件子导航

Question

我正在使用下面链接的 Bootstrap 数据悬停插件。

当您将鼠标悬停在导航中的每个元素上时，我有两个导航级别，子导航应该出现。那工作正常。

我遇到的问题是，如果没有显示其他子导航，我希望事件部分的子导航重新出现。

我在下面添加了 JS，它使事件元素之后的每个元素都能正常工作，但事件元素之前的每个元素以及事件元素都无法正常工作。

当我尝试从主导航元素转到它自己的子导航时，事件元素之前的元素正在重置为事件子导航

当我将鼠标移出主导航项时，它不会向其添加开放类，从而导致子导航消失。

HTML

<ul class="main-section-nav nav navbar-nav">
 <li class="dropdown">
  <a>item</a>    
  <ul>
    <li> item </li>
    <li> item </li>
    <li> item </li>
  </ul>
 </li>
 <li class="dropdown active open">
  <a>item</a>    
  <ul>
    <li> item </li>
    <li> item </li>
    <li> item </li>
  </ul>
 </li> 
 <li class="dropdown">
  <a>item</a>    
  <ul>
    <li> item </li>
    <li> item </li>
    <li> item </li>
  </ul>
 </li>  
 <li class="dropdown">
  <a>item</a>    
  <ul>
    <li> item </li>
    <li> item </li>
    <li> item </li>
  </ul>
 </li>
</ul>

JS

   $(document).ready(function() {
    $('.main-section-nav > li').mouseout(function(){
      $('.active').addClass('open');
    });
   });

https://cameronspear.com/blog/bootstrap-dropdown-on-hover-plugin/

Answer 1

只需使用 .mouseleave 即可

$('.main-section-nav > li').mouseleave(function(){
  $('.active').addClass('open');
});

jsFiddle: https://jsfiddle.net/CSS_Apprentice/xadrbp7m/2/

根据 w3schools :

The mouseout event triggers when the mouse pointer leaves any child elements as well the selected element.

The mouseleave event is only triggered when the mouse pointer leaves the selected element.