Question

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

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

更新：这里是http://jsfiddle.net/scuzgvmq/ 单击按钮以滑动并单击agian以查看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');
            }
        });
    });

汉堡响应按钮单击事件BUG

1 个答案: