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