jQuery悬停和SlideToggle

Question

我想使导航栏保持显示状态，直到我将指针悬停在该部分上为止。 发生的事情是，如果我将指针悬停在导航栏上，则显示会不断切换（先显示然后隐藏。它处于循环状态？）， 我只希望它停留。 然后当我的指针离开时再次隐藏

 <script> $(document).ready(function(){ $(".menu-trigger").hover(function(){ $("li").slideToggle(400, function(){ jQuery(this).toggleClass("nav-expanded").css('show',''); }); }); }); </script> 

 img { padding: 0px; max-width: 100%; max-height: auto; } .menu-trigger { pointer: cursor; display: block; position: fixed; font-family: Sans-serif; font-size: 15px; background-color: #664c7d; height: 35px; width: 100%; } li{ display: none; } li.navbar ul { } } div.nav-expanded { display: block; } 

Answer 1

您的代码有一些错误，并且尚不清楚您要完成什么（ .css('show', '') ？）。 我假设您需要的是一个元素，该元素将在悬停时切换其类，并且在不再悬停时将变回其原始状态。 您需要做的是，每当您的鼠标移到元素上或离开元素时，切换导航栏的类。

假设$nav是您的导航栏，则可以使用：

$nav.on('mouseover mouseout', function(){
  $nav.toggleClass('show');
});

或者（可以说更安全）：

$nav.on('mouseover', function(){
    $nav.addClass('show');
  }).on('mouseout', function(){
    $nav.removeClass('show');
  });

您可以在此JSFiddle中看到用法。