Question

如果用户单击汉堡图标，我希望从汉堡菜单显示项目，如果用户单击其他地方，则希望再次隐藏该项目。我的第一个（也是当前的）想法是这样的：

$('.brgIcon').on('click',function(){
   $('.brgItem').slideToggle();
   $('html').on('click',function(){
        $('.brgItem').slideUp();
        $('html').off('click');       
    })
})

但是效果不好。这些项目会向下滑动然后直接向上滑动。怎么了？

Thx：-）

更新：小提琴-> https://jsfiddle.net/mikexmagic/ap0mtuzs/7/

Answer 1

您可以使用e.stopPropagation（）阻止调用html click。

$(document).ready(function(){
 $('.brgIcon').on('click',function(e){
   $('.brgItem').slideToggle();
   e.stopPropagation();
 });

  $('html').on('click', function(){
     $('.brgItem').slideUp();
  })
})

要了解此行为，请参见在javascript中捕获和冒泡事件。 https://javascript.info/bubbling-and-capturing

Answer 2

因为$('.brgIcon')是$('html').on('click',function(){...的一部分，当您单击hamMenu时，它会同时同时slideDown和slideUp。因此您不会在屏幕上看到任何差异（很可能）。您需要做的是将菜单容器放在width和height为100％，固定为position的另一个分区中。和“ onClick”将整个容器向下滑动。在这种情况下，您可以选择$('container:not(.menu)').click菜单slideUp。我希望你能弄清楚：）

Burgermenu：如果单击图标，则为slideToggle；如果单击其他位置，则为slideUp（使用jQuery）

2 个答案: