gpt4 book ai didi

javascript - jQuery:下拉菜单脚本问题

转载 作者:太空宇宙 更新时间:2023-11-04 04:15:17 26 4
gpt4 key购买 nike

所以我有一个下拉菜单:

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) {

评估为 true,导致表单隐藏,添加一个 AND 条件:

if ($(e.target).parent(".sign-in").length == 0 && $(e.target).attr("class") != "sign-in") {

演示:http://jsfiddle.net/cGt4h/4/

关于javascript - jQuery:下拉菜单脚本问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20056932/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com