Question

我有这样的代码。唯一的问题是我必须点击两次才能在我隐藏它后打开下拉列表。你能看一下我的代码并告诉我如何修复它，这样我只需要点击切换一次来打开下拉列表吗？

＆＃13;

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

＆＃13;

<div id="toggle"></div>
<div id="drop-down">
  <ul>
    <li>heading 1</li>
    <li>heading 2</li>
  </ul>
</div>
</div>

＆＃13;

Answer 1

你缺少一个var menuVisible = false;在底部的情况下。如果您通过单击文档上的其他内容隐藏它，则还需要设置变量

这样可以解决问题：https://jsfiddle.net/sc3zLzqL/1/

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

不需要变量

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

1 个答案: