[英]jQuery: Issue with Dropdown Menu Script
所以我有一个下拉菜单:
JSFiddle链接: http : //jsfiddle.net/cGt4h/3/
HTML:
<div id="container">
<ul>
<li>
<a class='sign-in' href='#'>Login</a>
<div id="loginForm" class='log-content'>
<div>
User name:
<input type='text' />
</div>
<div>
Password:
<input type='text' />
</div>
<div>
<input type='button' value='Login' />
</div>
</div>
</li>
</ul>
</div>
脚本:
$('.sign-in').click(function(e) {
e.preventDefault();
$('#loginForm').toggle();
});
$("#loginForm").mouseup(function() {
return false;
});
$(document).mouseup(function(e) {
if ($(e.target).parent(".sign-in").length == 0) {
$('#loginForm').hide();
}
});
CSS:
#container {margin: 0 auto;width:400px; position:relative; }
#loginForm {
width:200px;
background-color:gray;
color:white;
padding:10px;
display:none;
}
li {list-style: none;}
.sign-in {
background-color:gray;
color:white;
text-decoration:none;
}
.sign-in:hover {background-color:red;}
.open-menu {
display:block !important;
left:0;
}
它运行正常,但是当我点击.sign-in选择器时,下拉列表在打开后不会关闭。
那是因为你的document.mousedown
函数导致表单隐藏,然后你的.sign-in
点击处理程序切换表单,导致它显示。 这一行:
if ($(e.target).parent(".sign-in").length == 0) {
evals为true
,导致表单隐藏,添加AND条件:
if ($(e.target).parent(".sign-in").length == 0 && $(e.target).attr("class") != "sign-in") {
演示: http : //jsfiddle.net/cGt4h/4/
尝试这个:
$('.sign-in').click(function(e) {
e.stopPropagation();
e.preventDefault();
$('#loginForm').toggle();
});
$("#loginForm").mouseup(function() {
return false;
});
$(document).mouseup(function(e) {
if ($(e.target).parent(".sign-in").length == 0 && $(e.target).attr("class") != "sign-in") {
$('#loginForm').hide();
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.