javascript - 如何在点击网页其他内容时关闭导航栏

Question

我创建了一个导航栏，它工作正常。

它由几个选项卡组成，例如主页、关于、服务、联系方式。

但是我想在点击网页内容的时候关闭。

代码:

(function() {

  var bodyEl = $('nav'),
    navToggleBtn = bodyEl.find('.nav-toggle-btn');

  navToggleBtn.on('click', function(e) {
    bodyEl.toggleClass('active-nav');
    e.preventDefault();
  });
})();
var height = $(window).height();
var width = $(window).width();
$(window).resize(function() {
  $("nav").removeClass("active-nav");
});

* {
  margin: 0;
  padding: 0;
}

body {
  font-family: Open Sans, Arial, sans-serif;
  overflow-x: hidden;
}

nav {
  position: fixed;
  z-index: 1000;
  top: 0;
  bottom: 0;
  width: 200px;
  background-color: #036;
  transform: translate3d(-200px, 0, 0);
  transition: transform 0.4s ease;
}

.active-nav {
  transform: translate3d(0, 0, 0);
}

nav ul {
  list-style: none;
  margin-top: 100px;
}

nav ul li a {
  text-decoration: none;
  display: block;
  text-align: center;
  color: #fff;
  padding: 10px 0;
}

.nav-toggle-btn {
  display: block;
  position: absolute;
  left: 200px;
  width: 50px;
  line-height: 40px;
  text-align: center;
  background-color: #666;
}

.content {
  padding-top: 300px;
  height: 1200px;
  background-color: lightgrey;
  text-align: center;
  transition: transform 0.4s ease;
}

.active-nav .content {
  transform: translate3d(200px, 0, 0);
}

.fa-bars {
  font-size: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<nav>
  <a href="#" class="nav-toggle-btn"> <i class="fa fa-bars"></i>
  </a>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>
<div class="content">
  <h1>This is content</h1>
</div>

当我点击网页中的其他内容时，如何关闭我的导航栏。

任何帮助将不胜感激。
提前谢谢你。

Answer 1

最简单的方法是在“内容”区域设置一个“点击”事件，这样无论何时点击其中的任何内容，都会使菜单再次隐藏:

$(".content").click(function(e) {
  bodyEl.removeClass('active-nav');
});

演示:

$(function() {

  var bodyEl = $('nav'),
    navToggleBtn = bodyEl.find('.nav-toggle-btn');

  navToggleBtn.on('click', function(e) {
    bodyEl.toggleClass('active-nav');
    e.preventDefault();
  });

  $(".content").click(function(e) {
    bodyEl.removeClass('active-nav');
  });
  
  var height = $(window).height();
  var width = $(window).width();
  $(window).resize(function() {
    $("nav").removeClass("active-nav");
  });
});

* {
  margin: 0;
  padding: 0;
}

body {
  font-family: Open Sans, Arial, sans-serif;
  overflow-x: hidden;
}

nav {
  position: fixed;
  z-index: 1000;
  top: 0;
  bottom: 0;
  width: 200px;
  background-color: #036;
  transform: translate3d(-200px, 0, 0);
  transition: transform 0.4s ease;
}

.active-nav {
  transform: translate3d(0, 0, 0);
}

nav ul {
  list-style: none;
  margin-top: 100px;
}

nav ul li a {
  text-decoration: none;
  display: block;
  text-align: center;
  color: #fff;
  padding: 10px 0;
}

.nav-toggle-btn {
  display: block;
  position: absolute;
  left: 200px;
  width: 50px;
  line-height: 40px;
  text-align: center;
  background-color: #666;
}

.content {
  padding-top: 300px;
  height: 2000px;
  background-color: #ccf;
  text-align: center;
  transition: transform 0.4s ease;
}

.active-nav .content {
  transform: translate3d(200px, 0, 0);
}

.fa-bars {
  font-size: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<nav>
  <a href="#" class="nav-toggle-btn"> <i class="fa fa-bars"></i>
  </a>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>
<div class="content">
  <h1>This is content</h1>
</div>

附言我稍微重新安排了您的 JavaScript 的其余部分，使其全部位于“就绪” block 中，我不确定之前的逻辑是什么。

附言您的演示两次包含 jQuery。这既是不必要的，也可能导致不可预测的问题。我在上面的演示中删除了旧版本。