Bootstrap中div重叠及批量下拉动画触发问题求助

嘿，这两个问题我都遇过，给你分享下简单有效的解决办法！

你遇到的重叠问题，根源确实是position: absolute——这个属性会让元素脱离正常文档流，所有复制的下拉内容都会默认相对于页面（或者最近的未设置定位的父元素）定位，自然就叠在一起了。

解决方案：给每个下拉框的外层容器（就是包含按钮和下拉内容的那个元素）加上position: relative，让下拉内容的绝对定位锚定在自己的父容器上，同时给容器加个间距避免挤在一起。

修改CSS代码：

/* 假设你的下拉框外层容器类是.faqBox */
.faqBox {
  position: relative; /* 新增：让内部绝对定位元素以它为基准 */
  margin-bottom: 15px; /* 新增：给每个下拉框之间留间距 */
}

.faqInner {
  position: absolute;
  top: 100%; /* 让下拉内容刚好贴在按钮下方 */
  left: 0;
  right: 0;
  /* 你原来的其他样式（比如背景、overflow:hidden等）保持不变 */
}

这样每个下拉内容都会乖乖待在自己父容器的正下方，不会和其他框重叠了。

你用类选择器选中所有.faqInner，点击时自然会触发所有元素的动画。其实不用给每个框加ID，利用DOM元素的关系就能精准控制单个下拉框。

解决方案：在点击事件里，用this（指向当前被点击的按钮）找到它对应的那个下拉内容，只操作这个元素就行。

修改JavaScript代码：

document.querySelectorAll('.faqBtn').forEach(btn => {
  btn.addEventListener('click', function() {
    // 找到当前按钮对应的下拉内容（这里假设按钮和.faqInner是兄弟元素）
    const targetDropdown = this.nextElementSibling;
    
    // 切换展开/收起状态
    if (targetDropdown.style.height === '0px' || targetDropdown.style.height === '') {
      targetDropdown.style.height = targetDropdown.scrollHeight + 'px';
    } else {
      targetDropdown.style.height = '0px';
    }
  });
});

如果你的DOM结构里，按钮和下拉内容不在同一层级（比如按钮在一个子容器里），可以用closest方法先找到外层容器，再定位下拉内容：

const targetDropdown = this.closest('.faqBox').querySelector('.faqInner');

这样不管DOM结构怎么调整，只要按钮和下拉内容在同一个.faqBox容器里，就能精准找到对应的元素，点击哪个按钮就只动哪个下拉框。

把这两个修改结合起来，你的下拉框就能正常工作啦！

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