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

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

不需要变量

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

How to hide dropdown menu when clicked anywhere on the page

javascript

jquery

menu

function

hide