如何实现jQuery slideToggle仅触发目标元素，避免所有元素移动？

嘿，我一眼就看出问题所在啦！你现在用的是id选择器（#toggle和#test），但id在整个页面里必须是唯一标识——如果你的页面有多个这样的col-lg-4模块，重复的id会让jQuery的选择逻辑混乱，点击一个按钮就会触发所有匹配id的元素滑动，自然就导致所有元素跟着移动了。

要解决这个问题，我们只需要把id换成class，再通过DOM的相对关系定位到被点击按钮对应的内容块，就能实现仅操作当前模块的效果。具体步骤如下：

1. 修改HTML结构：替换id为class #

把原来的id="toggle"改成class="toggle-btn"，id="test"改成class="content-wrap"，这样每个模块都能复用这些类名，不会出现冲突：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-lg-4">
  <img src="assets/kids-2580991_1920.jpg" class="d-block w-100" alt="活动图片">
  <div class="bottom-left toggle-btn">Pohybová príprava JUNIOR a TEEN</div>
  <div class="content-wrap" style="display: none;padding:50px;">testjandkansdlkjnaskjdnkajsdnjkasndkjansdkjanjkasd</div>
</div>
<!-- 可以复制多个上述模块，完全不会冲突 -->
<div class="col-lg-4">
  <img src="assets/another-image.jpg" class="d-block w-100" alt="另一活动图片">
  <div class="bottom-left toggle-btn">其他活动标题</div>
  <div class="content-wrap" style="display: none;padding:50px;">这是对应活动的详情内容</div>
</div>

2. 修改jQuery代码：精准定位当前模块的内容块 #

在点击事件里，用$(this)指代被点击的按钮，再通过.next()方法找到它紧邻的content-wrap元素——这样就只会对当前被点击模块里的内容执行滑动操作，完全不会影响其他模块：

$(document).ready(function(){
  $(".toggle-btn").click(function(){
    // 仅操作当前按钮对应的内容块
    $(this).next(".content-wrap").slideToggle("slow");
  })
});

额外优化：彻底避免布局跳动（可选） #

如果滑动时其他元素仍有轻微移动，可以给每个col-lg-4模块添加CSS样式，让内容块在模块内部展开/收起：

.col-lg-4 {
  overflow: hidden;
}

这样修改后，你点击哪个模块的按钮，就只会展开/收起该模块的内容，其他元素完全不会被干扰啦～

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