Question

尝试使用jQuery on（）来切换水平菜单的打开/关闭。

<ul id="mobile-header-left" class="app-btns">
    <li id="m-menu-btn" class="menu m-menu-btn-closed"><img src="img/m-menu.png" alt="Menu" /></li>
</ul>

/* Open */
$(".m-menu-btn-closed").click(function() {
    $("#m-menu-btn").removeClass("m-menu-btn-closed");
    $("#m-menu-btn").addClass("m-menu-btn-open");
    $("#m-menu").animate({left:'0'});
});

/* Close */
$("#mobile-header-left").on("click", ".m-menu-btn-open", function() {
    $("#m-menu-btn").removeClass("m-menu-btn-open");
    $("#m-menu-btn").addClass("m-menu-btn-closed");
    $("#m-menu").animate({left:'-75%'});
);

菜单打开确定，但我无法将其关闭。我知道它与选择一个动态添加的类有关，但是在上班时遇到了麻烦。

如果有人可以提供帮助，我们将不胜感激。

Answer 1

从元素中删除m-menu-btn-closed类不会阻止打开菜单的单击事件被激活。它已经绑定到元素，因此它不会受到更改类的影响。

当您尝试关闭菜单时，也会激活打开它的事件处理程序，并且您有两个动画相互争斗。

您也可以为open事件处理程序使用委托，然后在删除该类时将其停用：

$("#mobile-header-left").on("click", ".m-menu-btn-closed", function() {

或者，您可以使用单个事件处理程序，并在其中找出单击按钮时要执行的操作：

$("#m-menu-btn").click(function() {
  if ($(this).is(".m-menu-btn-closed")) {
    $(this).removeClass("m-menu-btn-closed").addClass("m-menu-btn-open");
    $("#m-menu").animate({left:'0'});
  } else {
    $(this).removeClass("m-menu-btn-open").addClass("m-menu-btn-closed");
    $("#m-menu").animate({left:'-75%'});
  }
});

带有动态选择器的jQuery on（）

1 个答案: