如何隐藏页面上任何地方点击下拉菜单

我有这样的代码。唯一的问题是，我必须点击两次才能在隐藏它后打开下拉菜单。你可以看看我的代码，并告诉我如何解决它，所以我只需要点击切换一次打开下拉菜单？如何隐藏页面上任何地方点击下拉菜单

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

来源

2015-03-31 john smith

发表一些HTML也请 – 2015-03-31 07:10:14

这应该会显示问题：https：//jsfiddle.net/sc3zLzqL/如果您点击关闭下拉菜单，点击外部的某个地方，您将不得不点击红色框两次以重新打开它 – 2015-03-31 07:15:24

我已经添加了html代码。弗兰克的例子正是我所说的。 – 2015-03-31 07:19:13

你缺少一个变种menuVisible = FALSE;在底部的情况下。如果通过单击somehwere其他的文件隐藏它，你将需要设置你的变量太多

这将这样的伎俩：https://jsfiddle.net/sc3zLzqL/1/

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

不需要变量

来源

2015-03-31 07:19:09

不幸的是，没有做到这一点。 – 2015-03-31 07:25:04

我在头文件中有多个不同的下拉菜单。我在页脚中有这个代码。它可能与我放置此代码的位置有关吗？ – 2015-03-31 07:26:37

为此 - 我添加了一个jsfiddle - 现在这个工程（测试），如果你不检查变量，但显示语句。之前的例子没有奏效，因为变量不是全局的 – 2015-03-31 07:32:59

如何隐藏页面上任何地方点击下拉菜单

回答

相关问题