我有一个 jquery 代码,可以显示 offcanvas 侧边栏,还可以通过切换类 active main-wrapper 类来降低页面不透明度。 这是代码
$(document).ready(function () {
$('.nav-icon').on('click', function(){
$('.offcanvas').toggleClass('is-open');
$('.main-wrapper').toggleClass('active');
}); // end of on click
}); // end of ready
我想要的是当单击页面上除 .nav-icon 类之外的任何位置时如何删除这两个切换的类。 这是 html 代码。
<div id="wrapper" class="main-wrapper">
<div class="off-canvas-wrapper">
<div id="offCanvasLeft" class="offcanvas" aria-hidden="true">
<ul class="nav menus flex-column">
<li class="nav-item">
<a class="nav-link active" href="#">artists</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link3</a>
</li>
</ul>
</div>
</div>
<!-- off-canvas-wrapper -->
<nav class="navbar">
<i class="fa fa-bars fa-2x nav-icon" aria-hidden="true"></i>
</nav>
<div id="main-section" class="container">
最佳答案
您可以像这样检查 .on() 处理程序的事件参数:
$(document).ready(function () {
$('.nav-icon').on('click', function(){
$('.offcanvas').toggleClass('is-open');
$('.main-wrapper').toggleClass('active');
});
$('html').on('click', function(event){
if(!$(event.target).hasClass('nav-icon'))
{
$('.offcanvas').removeClass('is-open');
$('.main-wrapper').removeClass('active');
}
});
});
关于javascript - jquery 如何在单击页面上的某个位置时隐藏侧边栏并删除类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46164554/