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