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

Answer 2

您对现有代码所需的唯一更改是为button click事件和document click事件添加相同的样式。

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

* {
  margin: 0;
  padding: 0;
}

.navigation {
  position: fixed;
  left: 0;
  top: 0;
  width: 0;
  height: 100%;
  box-shadow: 1px 0px 15px 0px #999;
  transition: .2s;
  display: none;
}

.header-image {
  height: 150px;
  background: yellow;
  margin-bottom: 5px;
}

ul {
  list-style-type: none;
}

ul li {
  display: inline-block;
  width: 100%;
  background: #eee;
}

ul li a {
  display: block;
  width: 100%;
  height: 50px;
}

.clearfix:after {
  content="";
  display: table;
  clear: both;
}

.menu-btn {
  height: 50px;
  width: 50px;
  background: none;
  border: none;
  cursor: pointer;
  outline: none;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 100;
}

.bar {
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  background: black;
  left: 10px;
  right: 10px;
}

.bar:before,
.bar:after {
  display: block;
  content: "";
  left: 0;
  width: 100%;
  background-color: black;
  position: absolute;
  height: 2px;
  transition: .15s ease-in-out;
}

.bar:before {
  top: -10px;
}

.bar:after {
  top: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="menu-btn">
  <span class="bar"></span>
</button>
<div class="navigation">
  <div class="header-image"></div>
  <ul>
    <div class="link">
      <li>
        <a href=""></a>
      </li>
    </div>
    <div class="link">
      <li>
        <a href=""></a>
      </li>
    </div>
    <div class="link">
      <li>
        <a href=""></a>
      </li>
    </div>
    <div class="link">
      <li>
        <a href=""></a>
      </li>
    </div>
  </ul>
</div>

Answer 3

感谢@Kukic Vladimir的解决方案，它可以对他提供的JS代码进行一些更改。

$('.menu-btn').click(function() {
 if($('.navigation').width() === 0) {
        $('.navigation').width('250px');
    } else {
       $('.navigation').width('0px');
    }
});
$(document).click(function(event) { 
    if(!$(event.target).closest('.navigation').length &&      
!$(event.target).hasClass('menu-btn')) {
    if($('.navigation').width('250px')) {
        $('.navigation').width('0px');
    }
 }        
})

当我点击其他时，如何隐藏我的侧滑导航？

3 个答案: