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">

使用Bootstrap Data-Hover State重置Active Subnav

2 个答案: