我有这样做的代码。唯一的问题是，在隐藏下拉菜单后，我必须单击两次以打开下拉菜单。您能看一下我的代码并告诉我如何解决它，这样我只需单击一次切换即可打开下拉菜单？
< script >
$(function() {
var menuVisible = false;
$('#toggle').click(function() {
if (menuVisible) {
$('#drop-down').css({
'display': 'none'
});
menuVisible = false;
return;
}
$('#drop-down').fadeIn(400).css({
'display': 'block'
});
menuVisible = true;
});
$('#drop-down').click(function() {
$(this).fadeOut(400).css({
'display': 'none'
});
menuVisible = false;
});
});
$(document).click(function(e) {
var container = $("#toggle");
if (!container.is(e.target) && container.has(e.target).length === 0) {
$("#drop-down").hide();
var menuVisible = false;
}
}); < /script><div id="toggle"></div>
<div id="drop-down">
<ul>
<li>heading 1</li>
<li>heading 2</li>
</ul>
</div>
</div>您缺少var menuVisible = false; 在底部的情况下。如果您通过在文档上单击其他按钮将其隐藏，则也需要设置变量
这将达到目的：https : //jsfiddle.net/sc3zLzqL/1/
if ($('#drop-down').css("display") != "none")
不需要变量
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句