javascript - 当我点击其他地方时如何隐藏我的滑动sidenav？

Question

我正在尝试模仿 android 的侧边菜单样式。这是我的codepen的链接 https://codepen.io/Killerbee98/pen/KqreZw . 我的问题是当我在导航之外按下时它不会像在 android 上那样关闭。现在我已经对如何做这样的事情做了一些研究；首先是使用:

$('#menucontainer').click(function(event){
  event.stopPropagation();
});

但这不是一个实用的方法，使用起来是错误的。

第二个是添加一个点击监听器:

$(document).click(function(event){ 
  if (!$(event.target).closest('.navigation').length) {
    $('.navigation').hide();
  }
});

但这不适用于我的代码，因为我的代码有一个点击监听器:

$('.menu-btn').click(function() {
   console.log("button pressed");
   if($('.navigation').width() === 250){
   $('.navigation').width('0px');
}else{
   $('.navigation').width('250px');
  }
})

我试过这样做:

$('.menu-btn').click(function() {
   console.log("button pressed");
   if($('.navigation').width() === 250){
   $('.navigation').width('0px');
   $(document).click(function(event){ 
       if (!$(event.target).closest('.navigation').length) {
           $('.navigation').hide();
       }
   });
 }else{
   $('.navigation').width('250px');
  }
})

它关闭但没有按预期再次打开。

我该如何解决我的问题？

Answer 1

我已经设法通过使用 this answer 制作了一个工作示例

这是代码

 $('.menu-btn').click(function() {
     if($('.navigation').is(":visible")) {
            $('.navigation').hide();
        } else {
           $('.navigation').show();
        }
})

$(document).click(function(event) { 
    if(!$(event.target).closest('.navigation').length &&      
    !$(event.target).hasClass('menu-btn')) {
        if($('.navigation').is(":visible")) {
            $('.navigation').hide();
        }
    }        
})

编辑:

我还为 navigation 类调整了 css 样式

.navigation{
  position:fixed;
  left: 0;
  top: 0;
  width: 250px;
  display: none;
  height: 100%;
  box-shadow: 1px 0px 15px 0px #999;
  transition: .2s;
}

这是一个working demo