單擊頁面上任何位置時如何隱藏下拉菜單

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

不需要變量