使用Bootstrap Data-Hover状态重置活动的Subnav

Question

我使用的是Bootstrap data-hover插件，链接如下。

我有两个级别的导航，当你将鼠标放在导航中的每个项目上时，子导航应该会出现。这工作得很好。

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

我在下面添加了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问题

This:

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

应该是这样的：

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