javascript - 在jQuery中切换类

我无法使我的代码正常工作。

$(document).ready(function() {
$('.openMenu').click(function() {
    $('#menu').animate({
    left: '0%'
    },500);
    $(this).removeClass('openMenu').addClass('closeMenu');
});

$('.closeMenu').click(function() {
    $('#menu').animate({
    left: '-100%'
    },500);
    $(this).removeClass('closeMenu').addClass('openMenu');
});
});

此代码块应该使菜单在单击类“ openMenu”的div时显示，并将其设置为“隐藏”按钮，以便再次单击该菜单时，菜单就会消失。等等。

它仅工作一次：菜单出现，div的类从openMenu更改为closeMenu，但不会隐藏菜单。

谢谢您的帮助

最佳答案

代码运行时$('.closeMenu')不存在。

您可以轻松地将2个处理程序合并为一个，或使用事件委托。

合并它们看起来像：

$('.openMenu').click(function() {
    var leftAmt = $(this).is('.closeMenu') ? '-100%' : '0%';
    $('#menu').animate({
    left: leftAmt
    },500);
    $(this).toggleClass('openMenu closeMenu');
});

我可能有这种情况，并且$('.openMenu')在页面加载时不存在（取决于初始元素的状态），如果是这种情况，只需更改开始选择器

关于javascript - 在jQuery中切换类，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/27072826/