javascript - 汉堡菜单 : slideToggle if click on icon and slideUp if click somewhere else (with jQuery)

Question

我喜欢在用户单击其图标时显示汉堡菜单中的项目，并在用户单击其他位置时再次隐藏该项目。我的第一个(也是当前)想法是这样的:

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

但是效果不太好。元素向下滑动，然后再次直接向上滑动。怎么了？

谢谢:-)

更新: fiddle -> https://jsfiddle.net/mikexmagic/ap0mtuzs/7/

Answer 1

可以使用e.stopPropagation()来阻止html点击的调用。

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