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

在导航栏关闭时打开导航栏，并在导航栏打开时将其关闭。我正在使用'开放'和'关闭'类来“看”它是否被打开并且基于这个火来正确的功能。

然而.. 假设它在默认情况下已关闭

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

为什么jQuery / my脚本没有遇到更改，并且在页面加载时保持不变..？

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

Answer 1

你应该使用$（＆＃39; .nav＆＃39;）。点击并在里面写一个带有hasClass的if语句。这是因为jQuery仅在生成DOM时附加click函数。你在这里没有任何已打开的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（）和其他人之后无法识别变化

1 个答案: