移动端折叠导航Slide Toggle切换失效问题求助

嘿，我发现你的问题根源了！在移动端选择分类后，新生成的「Select Category」按钮没法触发展开/收起，核心原因是事件绑定的方式不支持动态生成的元素，再加上可见性判断可以更严谨一点，咱们来一步步修复：

问题1：动态元素的事件绑定失效 #

当你在移动端选择分类时，代码会重新生成.menu-list-collapsible-small元素：

$(".menu-list-selected-small").html("<span class='list-pointer'></span><span class='selected-name'>" + tempMenuRem + "<i class='fas fa-trash'></i></span><span class='menu-list-entry-delete'><span class='menu-list-collapsible-small'>Select Category<i class='fas fa-chevron-down'></i></span></span>");

但你最初的点击事件是直接绑定到页面加载时就存在的元素上：

$(".menu-list-collapsible-small").click(function() { ... });

这种绑定只对页面初始渲染的元素生效，后来动态生成的新按钮不会继承这个事件，所以点击毫无反应。

问题2：可见性判断不够可靠 #

你之前尝试过从.css("display")改成.is("visible")，但没改对地方——mobileToggle函数里还是用了.css("display")判断，这个方法在某些场景下（比如元素有visibility:hidden但display:block）会出错，.is(":visible")才是jQuery判断元素可见性的标准方法。

修复后的完整JavaScript代码 #

$(document).ready(function() {
  // 改用事件委托绑定到document（或更接近的父元素），支持动态生成的元素
  $(document).on("click", ".menu-list-collapsible-small", function() {
    mobileToggle();
    $(".menu-list-selected-small").toggleClass("menu-list-selected-small-border");
  });

  $(".menu-list-collapsible").click(function() {
    $(this).siblings().slideToggle();
    $(this).find("span i").toggleClass("rotate-collapsible");
  });
});

function mobileToggle() {
  // 用.is(":visible")替代.css("display")，判断更可靠
  if ($(".menu-list-section").is(":visible")) {
    $(".menu-list-section").slideUp();
  } else {
    $(".menu-list-section").slideDown();
  }
}

$(".menu-list-entry").click(function() {
  if ($(window).width() >= 767) {
    var tempMenuRem;
    $(".menu-list-entry").each(function(i) {
      tempMenuRem = $(this).text();
      $(this).html("<span class='list-pointer'></span>" + tempMenuRem);
      $(this).removeClass("menu-list-selected");
    });
    var tempMenu = $(this).text();
    $(this).addClass("menu-list-selected");
    $(this).html("<span class='list-pointer'></span>" + tempMenu + "<span class='menu-list-entry-delete'><i class='fas fa-trash'></i></span>");
  } else {
    var tempMenuRem = $(this).text();
    $(".menu-list-selected-small").html("<span class='list-pointer'></span><span class='selected-name'>" + tempMenuRem + "<i class='fas fa-trash'></i></span><span class='menu-list-entry-delete'><span class='menu-list-collapsible-small'>Select Category<i class='fas fa-chevron-down'></i></span></span>");
    mobileToggle();
    $(".menu-list-selected-small").removeClass("menu-list-selected-small-border");
  }
});

关键修改点 #

1. 事件委托：把.menu-list-collapsible-small的点击事件绑定到document上（你也可以绑定到它的直接父元素.menu-list-selected-small，性能更好），这样不管元素是初始存在还是动态生成，都能触发事件。
2. 可见性判断优化：在mobileToggle里用.is(":visible")替代.css("display") != "none"，避免特殊场景下的判断错误。

这样修改后，你选择分类后再点击「Select Category」按钮，就能正常展开/收起导航啦！

内容的提问来源于stack exchange，提问作者Dolorosa