求助：ACF重复器环境下slideToggle()触发全部div的问题

这是个非常典型的DOM选择器冲突问题——ACF重复器会循环渲染每一行内容，你写死的#button和#buy ID会被重复生成多次，当你点击按钮时，JS会选中所有匹配该ID的元素，自然就会把所有隐藏div同时展开了。下面是具体的修复方案：

1. 替换固定ID为动态唯一标识 #

在ACF重复器的循环里，利用get_row_index()获取当前行的索引（或者用你字段里的唯一值，比如自定义的ID字段），给每个按钮和对应的div绑定唯一的关联标识：

<?php if( have_rows('你的重复器字段名') ): ?>
  <?php while( have_rows('你的重复器字段名') ): the_row(); 
    $row_index = get_row_index(); // 获取当前行的索引，从1开始
  ?>
    <button class="toggle-buy-btn" data-target="buy-section-<?php echo $row_index; ?>">
      <img src="images/right-arrow.png" width="35" class="button__icon">
    </button>
    <div id="buy-section-<?php echo $row_index; ?>" class="tour-event__wrapper--hidden tour-event__wrapper--hidden-bottom">
      <div class="widget-containter">
        <?php // 你的重复器内容 ?>
      </div>
    </div>
  <?php endwhile; ?>
<?php endif; ?>

这里把固定ID改成了动态生成的buy-section-1、buy-section-2...，同时给按钮加了data-target属性，用来关联对应的div。

2. 编写关联的JS逻辑 #

通过按钮的data-target属性找到对应的目标div，实现单独切换：

// 给所有切换按钮绑定点击事件
document.querySelectorAll('.toggle-buy-btn').forEach(btn => {
  btn.addEventListener('click', function() {
    const targetId = this.getAttribute('data-target');
    const targetDiv = document.getElementById(targetId);
    
    // 切换显示/隐藏状态（用类控制更灵活）
    targetDiv.classList.toggle('active');
  });
});

3. 配合CSS优化显示控制 #

建议用CSS类来管理显示隐藏，比直接操作style.display更易维护：

.tour-event__wrapper--hidden {
  display: none;
}
.tour-event__wrapper--hidden.active {
  display: block;
}

这样后期要调整显示样式（比如用opacity过渡动画），只需要修改CSS即可，不用改动JS。

额外：jQuery版本（如果项目已引入） #

如果你的项目里用了jQuery，可以用更简洁的写法：

$('.toggle-buy-btn').on('click', function() {
  $('#' + $(this).data('target')).toggleClass('active');
});

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