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中看到用法。