jquery hide() 的问题；切换类后

Question

我有一个 .menu div，当我单击它时，它会打开一个模式，并且 .menu 变为 .menu-open。这工作正常，但我想在单击 .menu-open 时关闭我的模式，但没有任何反应。

你能帮帮我吗？代码有什么问题？谢谢！

$(document).ready(function() {
  $(".menu").click(function() {
    $('.menu-modal').show();
    $(".menu").switchClass("menu", "menu-open");
  });
});

$(document).ready(function() {
  $(".menu-open").click(function() {
    $('.menu-modal').hide();
    $(".menu-open").switchClass("menu-open", "menu");
  });
});

Answer 1

考虑以下因素。

$(function() {
  function openMenu(){
    $('.menu-modal').show();
    $(".menu").switchClass("menu", "menu-open");
    $(this).off("click");
    $(this).click(closeMenu);
  }

  function closeMenu(){
    $(".menu-modal").hide();
    $(".menu-open").switchClass("menu-open", "menu");
    $(this).off("click");
    $(this).click(openMenu);
  }

  $(".menu").click(openMenu);
});

由于您正在更改 Class，它不再在 DOM 中，原始回调将不会是运行。我们需要使用 .off() 取消绑定该回调并分配新操作。

您还可以执行以下操作。

$(function() {
  $("body").on("click", ".menu", function(){
    $('.menu-modal').show();
    $(".menu").switchClass("menu", "menu-open");
  }

  $("body").on("click", ".menu-open", function(){
    $(".menu-modal").hide();
    $(".menu-open").switchClass("menu-open", "menu");
  }
});

使用 .on() 将有助于将回调委托给选择器。

查看更多：

唯一需要注意的是，如果模态框覆盖了需要点击的元素，点击事件将无法定位该元素。

jquery hide() 的问题；切换类后

Problem with jquery hide(); after switchClass

jquery

jquery-ui