jquery hide() 的问题；在 switchClass 之后答案

【问题标题】：Problem with jquery hide(); after switchClassjquery hide() 的问题；在 switchClass 之后
【发布时间】：2021-01-13 15:49:13
【问题描述】：

我有一个.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");
  });
});

【问题讨论】：

同时显示您的 html
$(".menu-open").click 仅适用于 在代码运行时存在的元素 - 当您稍后添加类时，您的元素并不存在。使用事件委托。 $(document).on("click", ".menu-open", function...
这能回答你的问题吗？ Event binding on dynamically created elements?
虽然不是严格的“动态创建” - 请参阅链接了解详情

标签： jquery jquery-ui

【解决方案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() 将有助于将回调委托给选择器。

查看更多：

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

【讨论】：