单击页面上任何位置时如何隐藏下拉菜单

Question

我有这样做的代码。 唯一的问题是我必须单击两次以将其隐藏起来。 您能看一下我的代码并告诉我如何解决它，这样我只需单击一次切换即可打开下拉菜单？

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

Answer 1

您缺少var menuVisible = false; 在底部的情况。 如果您通过单击文档中的其他按钮将其隐藏，则也需要设置变量

这将达到目的： https : //jsfiddle.net/sc3zLzqL/1/

if ($('#drop-down').css("display") != "none") 

不需要变量