JQuery主从交互脚本中嵌入href链接不触发toggle逻辑的解决方案咨询

解决方案 #

核心原因 #

你当前的点击事件绑定在父容器.showschedule上，子元素的点击事件会向上冒泡到父容器，所以点击slave区域、内部链接、画廊组件等子元素时，都会触发父容器绑定的slideToggle收起逻辑。

方案1：限定触发区域（推荐，改法最简单） #

直接把点击事件绑定到主元素的标题（h3）上，只有点击标题才会触发展开/收起，点击slave区域和内部交互元素完全不受影响：

$(document).ready(function() {
  // 仅给主元素标题绑定点击事件
  $(".showschedule h3").click(function() {
    $(this).closest(".showschedule").find(".schedule").slideToggle("slow");
  })
});

方案2：排除指定元素的点击触发 #

如果需要保留点击主元素空白区域也能触发切换的逻辑，可以通过判断点击目标来过滤不需要触发的场景：

$(document).ready(function() {
  $(".showschedule").click(function(e) {
    // 匹配需要排除的元素：slave区域、a链接、画廊组件（可自行补充选择器）
    if($(e.target).closest(".schedule, a, .gallery-component").length > 0) {
      return;
    }
    $(this).find(".schedule").slideToggle("slow");
  })
});

closest方法会判断点击的元素本身或其祖先元素是否匹配指定选择器，匹配到就直接返回不执行切换逻辑，你可以根据实际要排除的元素类型补充选择器即可。

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