如何用jQuery toggle函数在循环中实现点击新元素关闭前一个div

嘿，我看了你的需求和代码，本质是要实现点击每个.money-transf按钮时，只显示对应的.slider-div内容块，同时关闭其他已经打开的内容块，我给你两种实用的实现方案，结合你的代码修改，好理解也好用：

方案一：利用DOM结构关联（推荐，代码更简洁） #

这是最直观的写法，因为你的按钮和内容块是一一相邻的结构，直接用jQuery的DOM遍历方法就能精准配对：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
/* 可选：默认隐藏所有内容块，初始页面更整洁 */
.slider-div {
  display: none;
}
</style>
<div class='money-transf'>
  <p>Element</p>
</div>
<div class='slider-div'>
  <p>Inform about element</p>
</div>
<div class='money-transf'>
  <p>Element2</p>
</div>
<div class='slider-div'>
  <p>Inform about element2</p>
</div>

<script>
$(document).ready(function() {
  $('.money-transf').click(function() {
    // 找到当前点击按钮对应的下一个内容块
    const targetSlider = $(this).next('.slider-div');
    
    // 先把所有不是当前目标的内容块关闭
    $('.slider-div').not(targetSlider).slideUp();
    
    // 再切换当前目标内容块的显示/隐藏状态
    targetSlider.slideToggle();
  });
});
</script>

代码逻辑说明 #

• 精准配对：$(this).next('.slider-div')直接定位到当前按钮后面的内容块，不用额外加ID或者索引，哪怕后续DOM结构微调（只要按钮和内容块保持相邻）也能适配。
• 关闭其他内容：$('.slider-div').not(targetSlider).slideUp()确保同一时间只有一个内容块可能处于打开状态，完全满足你「点击第二个元素时关闭之前的div」的核心需求。
• 切换状态：slideToggle()是jQuery的原生切换方法，点击一次显示内容，再点一次隐藏，完美实现你要的toggle功能。

方案二：基于你原代码的循环索引写法 #

如果你想坚持用循环的思路，那要注意一个关键坑：$this[i]是原生DOM元素，必须转成jQuery对象才能调用toggle方法，修改后的代码如下：

$(document).ready(function() {
  const $transfBtns = $('.money-transf');
  const $sliderDivs = $('.slider-div');

  $transfBtns.click(function() {
    // 获取当前点击按钮的索引
    const currentIndex = $transfBtns.index(this);
    
    // 遍历所有内容块
    for (let i = 0; i < $sliderDivs.length; i++) {
      const $slider = $($sliderDivs[i]); // 把原生DOM节点转成jQuery对象
      if (i === currentIndex) {
        // 对应索引的内容块切换显示/隐藏状态
        $slider.slideToggle();
      } else {
        // 其他索引的内容块强制关闭
        $slider.slideUp();
      }
    }
  });
});

核心修复点 #

你原代码里的$this[i]是原生DOM节点，并没有jQuery的toggle方法，必须用$($this[i])包裹成jQuery对象后，才能调用jQuery的切换类方法，这是你之前代码无法正常工作的关键原因。

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