Question

因此，第一个代码块会打开并关闭.main-navigation，同时将阴影叠加层放在页面上。但我想要完成的是点击导航外的任何地方来执行相同的操作（关闭菜单并删除叠加层），只有当菜单打开并且叠加在页面上时 - 所以如果应用了这两个类。 / p>

小提琴：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元素，因此当$(document).click()触发时，其中的if语句始终会产生错误。将其更改为：

$(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中添加的检查，以防止点击主菜单本身时关闭。

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

1 个答案: