javascript - jquery 如何在单击页面上的某个位置时隐藏侧边栏并删除类

Question

我有一个 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">

Answer 1

您可以像这样检查 .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');         
        }
    }); 

});