javascript - 汉堡响应式按钮点击事件BUG

Question

我的汉堡按钮有一个烦人的错误。我在 stackoverflow 上找到了如何在单击文档上其他位置时隐藏下拉菜单，但这会导致一个错误，如果我想通过再次单击它隐藏的汉堡包图标来关闭菜单一秒钟然后再次显示。

关于我做错了什么的建议？

更新:这里是 http://jsfiddle.net/scuzgvmq/点击按钮向下滑动，再次点击即可看到BUG

$('.hamburger').click(function() {
  $('#header .responsive-menu').slideToggle();
});

$(document).mouseup(function (e) {
   var container = $("#header .responsive-menu");

  if (!container.is(e.target) // if the target of the click isn't the container...
     && container.has(e.target).length === 0) // ... nor a descendant of the container
  {
      container.hide('slow');
  }
});

HTML

<ul class="responsive-menu">
    <li>Example</li>
    <li>Example</li>
    <li>Example</li>
</ul>

<div class="hamburger"></div>

Answer 1

您需要检查触发器是否不是像 this fiddle 中那样的汉堡包按钮。

    $(document).ready(function () {
        var container = $(".responsive-menu");
        var hamburger = $(".hamburger");

        hamburger.on('click', function () {
            container.slideToggle();
            container.addStyle('display:block');
        });

        $(document).on('mouseup', function (e) {

            if (!container.is(e.target) && !hamburger.is(e.target) && container.has(e.target).length === 0) // ... nor a descendant of the container
            {
                container.hide('slow');
            }
        });
    });