JQuery 悬停和滑动切换答案

【问题标题】：JQuery Hover and SlideToggleJQuery 悬停和滑动切换
【发布时间】：2016-08-23 15:18:22
【问题描述】：

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

<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;
	
}

【问题讨论】：

您的代码sn-p有错误，请更正。
你想用.css('show': ' ') 完成什么？
从问题中删除了不必要的情绪。

标签： javascript jquery html css hover

【解决方案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 中查看用法。

【讨论】：