在元素Jquery外部单击时如何切换类

Question

因此，第一段代码打开和关闭.main导航，同时将阴影叠加层覆盖在页面上。 但是我想完成的是仅在打开菜单且覆盖层位于页面上方的情况下，在导航外部的任何位置单击以执行相同的操作（关闭菜单并移除覆盖层）-如果应用了这两个类。

小提琴： https : //jsfiddle.net/bfgb951w/

<header id="ovlay">
            <span class="nav-toggle eq">&equiv;</span>
            <nav class="main-navigation">
                <span class="nav-toggle">&times;</span>
                <ul class="menu">
                    <li><a href="#about" class="slide-section">About</a></li>
                    <li><a href="#works" class="slide-section">Works and stuff</a></li>
                    <li><a href="#contact" class="slide-section">Contact</a></li>
                </ul>
            </nav>
        </header> 

$(document).ready(function(){
    $('.nav-toggle').on('click', function(){
        $('.main-navigation').toggleClass('open');
        $('#ovlay').toggleClass('overlay');
    });
});

$(document).click(function(){
    if($('.nav-toggle').hasClass('open')) {
        $('.main-navigation').toggleClass('open');
        $('#ovlay').toggleClass('overlay');
    }
});

Answer 1

您永远不会将open类设置为.nav-toggle元素，因此在.nav-toggle $(document).click()时，其中的if语句始终产生false。 更改为：

$(document).ready(function(){
    $('.nav-toggle').on('click', function(){
        $('.main-navigation').toggleClass('open');
        $('#ovlay').toggleClass('overlay');
        return false;
    });
});

$(document).click(function(event){
    if($('.main-navigation').hasClass('open') && $(event.target).closest(".main-navigation").length == 0) {
        $('.main-navigation').toggleClass('open');
        $('#ovlay').toggleClass('overlay');
    }
});

检查这个小提琴： https : //jsfiddle.net/1n78d9jq/

请注意document.click中添加的支票，当单击主菜单本身时，它会阻止关闭。