单击网页中的其他内容时如何关闭导航栏

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>

PS 我稍微重新排列了你的 JavaScript 的其余部分，全部都在一个“就绪”块中，我不确定它以前的逻辑是什么。

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

Answer 2

塞尔维亚语：Jednostavno samo dodaj ovo na kraju svoje skripte：

ENG：只需在脚本末尾添加以下内容：

$('div').click(function(){
$('nav').removeClass("active-nav");
});

Answer 3

您只需将 onclick 事件处理程序附加到文档。

 var height = $(window).height(); var width = $(window).width(); $(function() { var bodyEl = $('nav'), navToggleBtn = bodyEl.find('.nav-toggle-btn'); navToggleBtn.on('click', function(e) { bodyEl.toggleClass('active-nav'); e.preventDefault(); }); $(document).on('click', function(e) { if(!$(e.target).closest(bodyEl).length && bodyEl.hasClass('active-nav')) { bodyEl.removeClass('active-nav'); } }); }); $(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"/> </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>