使用引导数据悬停状态重置活动子导航

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：

当鼠标指针离开任何子节点时触发 mouseout 事件 元素以及选定的元素。

mouseleave 事件仅在鼠标指针离开时触发 被选中的元素。

Answer 2

错误的 HTML 问题

这个：

<ul class="class="main-section-nav nav navbar-nav>

应该是这样的：

<ul class="main-section-nav nav navbar-nav">