Question

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

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

这个代码块应该是当div与class＆＃34; openMenu＆＃34;单击并使其成为＆＃34;隐藏＆＃34;按钮，以便再次单击时，菜单消失。等等。

它只运行一次：菜单出现，div的类从openMenu更改为closeMenu，但它不会使菜单隐藏。

感谢您的帮助

Answer 1

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

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

将它们组合起来就像：

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

我可能会倒退，$('.openMenu')在页面加载时不存在（取决于初始元素的状态），如果是这样的话，只需更改开始选择器

Answer 2

我怀疑事件授权就是你在此之后所做的事情。不要使用jQuery的.click方法，而应考虑使用.on方法，并在那里提供选择器。

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

Answer 3

您的代码未经过优化。无论如何，它不会起作用，因为你将一个事件附加到一个不存在的元素.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/或Google ...

在jQuery中切换类

3 个答案: