jQuery 无法识别 .removeClass() 和其他人之后的更改

Question

我受够了一个奇怪的问题 - 或者只是常规功能.. 无论哪种方式。

我正在使用以下代码

$(function () {
    $('nav.closed').click(function () {
        console.log('time to open it');
        $(this).removeClass('closed').addClass('opened')
        $('.navBar.collapsed').removeClass('collapsed').addClass('open');
    });
    $('nav.opened').click(function () {
        console.log('time to close it');
        $(this).removeClass('opened').addClass('closed')
        $('.navBar.open').removeClass('open').addClass('collapsed');
    });
});

导航栏在关闭时打开，在打开时关闭。我正在使用 'open' 和 'close' 类到 'see' 无论它是否打开，并基于此触发正确的功能。

但是.. 假设它默认关闭

当我单击导航栏（已关闭）时，它会删除 .closed 并添加 .opened 并记录 Time to open it。当我现在第二次单击它时，它应该删除 .opened、添加 .closed 并记录 time to close it。然而，它认为它仍然有旧的类，因此什么都不做，但记录 time to open it，即使它已经打开了..

为什么 jQuery/my 脚本在页面加载时没有发生变化并保持不变..？

编辑：我正在努力实现 this nav animation，尽管有点不同。 点击主导航栏打开隐藏导航

Answer 1

你应该使用 $('.nav').click 并在里面写一个带有 hasClass 的 if 语句。这是因为 jQuery 只在 DOM 生成时附加了点击功能。您这里没有任何打开的 div。正确的解决方案应该是这样的：

$(function () {
    $('nav').click(function () {
        if($(this).hasClass("closed")) {
            console.log('time to open it');
            $(this).removeClass('closed').addClass('opened');
            $('.navBar.collapsed').removeClass('collapsed').addClass('open');
        }
        else if($(this).hasClass("opened")) {
            console.log('time to close it');
            $(this).removeClass('opened').addClass('closed');
            $('.navBar.open').removeClass('open').addClass('collapsed');
        }
    });
});

但是如果你这样做会更干净:

$(function () {
    $('nav').click(function () {
        $(this).toggleClass("opened").toggleClass("closed");
        $('.navBar').toggleClass("open").toggleClass("collapsed");
    });
});

jQuery 无法识别 .removeClass() 和其他人之后的更改

jQuery doesn't recognizes changes after .removeClass() and others

jquery

sequence

addclass