在 jQuery 中切换类

Switching classes in jQuery

本文关键字：jQuery      更新时间：2023-09-26

我无法让我的代码工作。

$(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')页面加载时不存在（取决于初始元素的状态），如果是这种情况，只需更改开始选择器

我怀疑事件委托就是你在这里追求的。与其使用 jQuery 的 .click 方法，不如考虑使用 .on 方法，并在其中提供选择器。

$(document).ready(function() {
  $(document).on("click", ".openMenu", function() {
    // ...
  });
  $(document).on("click", ".closeMenu", function() {
    // ...
  });
});

您的代码未优化。无论如何，它不起作用，因为您要将事件附加到不存在的元素.closeMenu。

若要将事件附加到随时（也在加载页面后）创建的元素，应使用事件委派。在 jQuery 中，事件委派可以通过on()和off()方法获得。请参阅：http://api.jquery.com/on/

这是解决方案（未测试）：

$(document).on('click','.openMenu.', callback);
$(document).on('click','.closeMenu.', callback);

此解决方案之所以有效，是因为您将事件附加到目标的现有父级。

（我再说一遍：这段代码没有优化，菜单可以用更好的方式完成，但事件委托解决了这个典型的事件问题）。

有关事件委派的更多信息，请参阅 http://learn.jquery.com/events/event-delegation/或谷歌...

相关文章：