Question

我有一个jquery代码，用于显示offcanvas侧边栏，并通过切换class acive主包装类来降低页面不透明度。这是代码

$(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');         
        }
    }); 

});

Answer 2

使用事件委派，您可以在document上设置一个响应除.nav-icon之外的任何元素的点击事件，该事件处理程序只会应用一个设置disply:none的类到.nav-icon。

$(document).ready(function () {
    $('.nav-icon').on('click', function(){
       $('.offcanvas').toggleClass('is-open');
       $('.main-wrapper').toggleClass('active');
    }); // end of on click   
    
    // When anything on the page is clicked excpet ".nav-icon"...
    $(document).on("click", "div:not(.nav-icon)", function(){
       // Hide ".nav-icon"
       $(".nav-icon").addClass("hidden");
    });        
}); // end of ready

.hidden { display:none; }

.nav-icon {
  height:50px;
  width:150px;
  background-color:yellow;
  margin:10px;
}

.nav {
  height:50px;
  width:150px;
  background-color:lightblue;
  margin:10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <div class="nav-icon">I'm .nav-icon</div>
  <div class="nav">I'm not .nav-icon</div>
</body>

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

2 个答案: