单击正文时折叠导航菜单

Question

使用JQuery，我希望能够通过单击页面上的其他地方（任何不是汉堡的东西）来折叠我的导航。我想我理解其中的逻辑，但就是无法使其起作用。

请参阅以下 JFiddle。https://jsfiddle.net/ywkxyjx3/33/

这是我到目前为止的逻辑：

$(".burger").click(function() {
  $(".nav").toggleClass("show", 900); // toggles on .show css
  $(".burger").toggleClass("change"); // toggles on .change css for hamburger animation
});
$('body').click(function(event){ //onBodyclick
  if ($(!event.target).closest('.navCont').length) { //if click isnt 
navCont or any child elements then..
    return; //do nothing
  } else {
    // do something when not targeted
  }
});

经过一些研究，我发现了类似的问题，但我未能将其应用于我自己的自建导航。

如何隐藏我的折叠引导程序 3 导航栏，单击正文，当崩溃可见时？

在 Bootstrap 3 中的导航栏元素外部单击时，如何关闭打开的折叠导航栏？

Answer 1

查看下面的代码。

$(".burger").click(function() {
  $(".nav").toggleClass("show", 900);
  $(".burger").toggleClass("change");
});
$('body').click(function(event){
  if ($(!event.target).closest('.navCont').length) {
    return; //do nothing
  } else {
  	// do something when not targeted
  }
});
$('html').click(function() {
   $(".nav").removeClass("show", 900);
   $(".burger").removeClass("change");
});
$('#navCont').click(function(event){
     event.stopPropagation();
});

#navCont {
  width: 47px;
  height: auto;
  float: right;
}
/*Dropdown Nav*/
.nav {
  position: absolute;
  display: block;
  height: 0px;
  float: right;
  overflow: hidden;
  top: 55px;
  opacity: 99;
  text-align: center;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
.nav a {
  color: black;
  text-decoration: none;
}
.show {
  height: auto;
}
.burger {
  /* box around hamburger. Has onclick function*/
  display: inline-block;
  position: relative;
  float: right;
  padding: 5px;
  cursor: pointer;
}
/*Individual lines of burger*/
.bar1,
.bar2,
.bar3 {
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background-color: #95449a;
  margin: 6px 0;
  /*seperate the lines*/
  transition: 1s;
  /*time taken for any animation to take place */
}
/*in html classlist.toggle(change)*/
.change .bar1 {
  -webkit-transform: translateY(10px) rotate(45deg);
  transform: translateY(10px) rotate(45deg);
}
.change .bar2 {
  opacity: 0;
  -webkit-transform: translateX(10px);
  transform: translateX(10px);
}
.change .bar3 {
  -webkit-transform: translateY(-10px) rotate(-45deg);
  transform: translateY(-10px) rotate(-45deg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="navCont">
  <div class="burger">
    <div class="bar1"></div>
    <div class="bar2"></div>
    <div class="bar3"></div>
  </div>
  <div class="nav">
    <a href="#">Placeholder1</a>
    <a href="#">Placeholder2</a>
    <a href="#">Placeholder3</a>
  </div>
</div>

Answer 2

试试这个：

$(".burger").click(function(event) {
  $(".nav").toggleClass("show", 900);
  $(".burger").toggleClass("change");
  event.stopPropagation();
});
$(document).click(function(event) { 
   if($('.change').length){
      $(".nav").toggleClass("show", 900);
      $(".burger").toggleClass("change");
  }
});

#navCont {
  width: 47px;
  height: auto;
  float: right;
}
/*Dropdown Nav*/
.nav {
  position: absolute;
  display: block;
  height: 0px;
  float: right;
  overflow: hidden;
  top: 55px;
  opacity: 99;
  text-align: center;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
.nav a {
  color: black;
  text-decoration: none;
}
.show {
  height: auto;
}
.burger {
  /* box around hamburger. Has onclick function*/
  display: inline-block;
  position: relative;
  float: right;
  padding: 5px;
  cursor: pointer;
}
/*Individual lines of burger*/
.bar1,
.bar2,
.bar3 {
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background-color: #95449a;
  margin: 6px 0;
  /*seperate the lines*/
  transition: 1s;
  /*time taken for any animation to take place */
}
/*in html classlist.toggle(change)*/
.change .bar1 {
  -webkit-transform: translateY(10px) rotate(45deg);
  transform: translateY(10px) rotate(45deg);
}
.change .bar2 {
  opacity: 0;
  -webkit-transform: translateX(10px);
  transform: translateX(10px);
}
.change .bar3 {
  -webkit-transform: translateY(-10px) rotate(-45deg);
  transform: translateY(-10px) rotate(-45deg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="navCont">
  <div class="burger">
    <div class="bar1"></div>
    <div class="bar2"></div>
    <div class="bar3"></div>
  </div>
  <div class="nav">
    <a href="#">Placeholder1</a>
    <a href="#">Placeholder2</a>
    <a href="#">Placeholder3</a>
  </div>
</div>

Answer 3

这是我

的想法。

$(".burger").click(function(event) {
   // Added this to make sure $('body').click doesn't override open nav function
   event.stopPropagation() 
   $(".nav").toggleClass("show", 900);
   $(".burger").toggleClass("change");
});
// then when you click the body, it checks to see whether or not it is already open, if it is, close it.
$('body').click(function(){
  if ($(".nav").hasClass('show') && $(".burger").hasClass('change') ) {
    $(".nav").toggleClass("show", 900);
    $(".burger").toggleClass("change");
  } 
})