javascript - jQuery幻灯片效果与jQuery UI位置冲突

当您将鼠标悬停在某个元素上时，position函数会将其左属性更改为正确的值，但是当您将鼠标悬停在外时，它会重置回0，以显示在列表中第一个元素的下面。
这个问题只有当你用鼠标在导航栏中除了第一个元素之外的任何列表元素上输入和保留时才能看到。
代码如下：

$(document).ready(function() {
	$('.nav_item').mouseenter(function() {
		var listNode = $(this);

		// must be called first before the position call (no clue why)
		$('#nav_sub_list').stop().slideDown('normal');

		$('#nav_sub_list').position({
			of: listNode,
			my: "left top",
			at: "left bottom",
			collision: "fit none"
		});

		// left will not be 0 for all <li> elements except the first
		console.log($('#nav_sub_list').position());
		console.log("mouse in");
	});

	$('#nav_sub_list').mouseout(function() {
		// will reset left back to 0
		console.log($('#nav_sub_list').position());

		$('#nav_sub_list').stop().slideUp('normal');

		// left will be 0
		console.log($('#nav_sub_list').position());
		console.log("mouse out");
	});
});

#nav_sub_list {
	position: absolute;
	top: 40px;
	width: 200px;
	height: 200px;
	background-color: pink;
	display: none;
}

ul.h_btn_list li {
	display: inline;
	padding: 10px;
	color: white;
	width: 100%;
	font-weight: bold;
}

li.nav_item {
	position: relative;
}

#nav_bar {
	position: relative;
	z-index: 2;
}

#nav_bar ul {
	margin: 0px 5%;
	background-color: #005eff;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	border: 3px transparent;
	padding: 10px;
	float: right;
	-webkit-box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.57);
	-moz-box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.57);
	box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.57);
}

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<div id="nav_bar">
	<ul class="h_btn_list">
		<li class="nav_item">Home
			<div id="nav_sub_list"></div>
		</li>
		<li class="nav_item">Community</li>
		<li class="nav_item">Downloads</li>
		<li class="nav_item">Contact Us</li>
	</ul>
</div>

谢谢你帮助我或查看我的代码！

最佳答案

代码无法正常工作，因为在html中，div位于第一个"#nav_sub_list"中，这就是为什么在li中的mouse over使"#nav_sub_list"代码运行
把$('.nav_item').mouseenter(function() {放在外面可以解决你的问题。

$(document).ready(function() {
	$('.nav_item').mouseenter(function() {
		var listNode = $(this);

		// must be called first before the position call (no clue why)
		$('#nav_sub_list').stop().slideDown('normal');

		$('#nav_sub_list').position({
			of: listNode,
			my: "left top",
			at: "left bottom",
			collision: "fit none"
		});

		// left will not be 0 for all <li> elements except the first
		console.log($('#nav_sub_list').position());
		console.log("mouse in");
	});

	$('#nav_sub_list').mouseout(function() {
		// will reset left back to 0
		console.log($('#nav_sub_list').position());

		$('#nav_sub_list').stop().slideUp('normal');

		// left will be 0
		console.log($('#nav_sub_list').position());
		console.log("mouse out");
	});
});

#nav_sub_list {
	position: absolute;
	top: 40px;
	width: 200px;
	height: 200px;
	background-color: pink;
	display: none;
}

ul.h_btn_list li {
	display: inline;
	padding: 10px;
	color: white;
	width: 100%;
	font-weight: bold;
}

li.nav_item {
	position: relative;
}

#nav_bar {
	position: relative;
	z-index: 2;
}

#nav_bar ul {
	margin: 0px 5%;
	background-color: #005eff;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	border: 3px transparent;
	padding: 10px;
	float: right;
	-webkit-box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.57);
	-moz-box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.57);
	box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.57);
}

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<div id="nav_bar">
	<ul class="h_btn_list">
		<li class="nav_item">Home

		</li>
		<li class="nav_item">Community</li>
		<li class="nav_item">Downloads</li>
		<li class="nav_item">Contact Us</li>
	</ul>
</div>
<div id="nav_sub_list"></div>

关于javascript - jQuery幻灯片效果与jQuery UI位置冲突，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/34356328/