我的菜单未使用 jQuery 正确切换 "fullscreen" class

Question

这是我在 CodePen 上制作此菜单的笔的 link - http://codepen.io/PartTimeCoder/pen/YqYmgv

在我的 jQuery 代码中，我有以下内容：

$(".menu").click(function() {
    $(this).addClass("fullscreen");
    $("p").show();
});

if ($('.menu').hasClass("fullscreen")) {
    $(".toggle").click(function() {
        $(".menu").removeClass("fullscreen");
    });
} else {
    $(".toggle").click(function() {
        $(this).toggleClass("active");
        $(".menu").toggleClass("active");
        $("p").hide();
    });
}

当菜单有全屏时class我只想从当前部分中删除全屏class，而不是完全关闭菜单。我不知道该怎么做，在使用 jQuery 和 Javascript 版本的 hasClass 后，我仍然无法让它工作。感谢所有帮助！提前致谢！

Answer 1

只需将 if else 反转到点击函数内部，如下所示：

$(".menu").click(function() {
    $(this).addClass("fullscreen");
    $("p").show();
});


$(".toggle").click(function() {
    if ($('.menu').hasClass("fullscreen")) {
        $(".menu").removeClass("fullscreen");
    } else {
        $(this).toggleClass("active");
        $(".menu").toggleClass("active");
        $("p").hide();
    }
});

http://codepen.io/anon/pen/JXpjXq

我的菜单未使用 jQuery 正确切换 "fullscreen" class

My menu isn't toggling the "fullscreen" class correctly using jQuery

html

javascript

css

jquery