重复实现的Bootstrap Collapse函数仅对第一组内容生效求助

嘿，这个问题我太熟了！大概率是你在给元素绑定事件或者选择目标内容的时候，没处理好每个期刊分组的独立性，导致所有“查看更多”按钮都只认第一组的隐藏内容。咱们一步步拆解问题，给你搞定它：

最常见的问题根源：重复ID或全局选择器误用 #

1. 重复使用了相同的ID #

如果你的HTML里，每个分组的隐藏文章容器、“查看更多”按钮都用了同一个ID（比如id="hidden-articles"、id="show-more"），那麻烦就来了——HTML规范里ID必须是唯一的，document.getElementById()或者$("#hidden-articles")这类方法只会返回第一个匹配的元素，所以不管你点哪个按钮，都只会操作第一组的内容。

2. 全局选择器导致操作范围错误 #

要是你用了document.querySelector('.hidden-articles')或者$('.hidden-articles')这种全局选择器，点击按钮时会一次性选中页面上所有匹配的元素，要么全部展开，要么还是只操作第一个（取决于你用的方法）。

正确的解决方案：基于上下文的元素操作 #

核心思路是：点击按钮时，只操作当前按钮所在分组内的隐藏内容，而不是全局查找。

第一步：调整HTML结构（用类代替重复ID） #

给每个期刊分组套一个容器，所有相同功能的元素用类标识：

<!-- 第一期期刊 -->
<div class="issue-container">
  <h3>2024年第1期</h3>
  <ul class="article-list">
    <li>《前端性能优化指南》 - 张三</li>
    <li>《CSS新特性详解》 - 李四</li>
    <li>《JS异步编程实战》 - 王五</li>
    <li>《响应式设计原理》 - 赵六</li>
    <!-- 隐藏的文章 -->
    <li class="hidden-article">《Web组件开发》 - 孙七</li>
    <li class="hidden-article">《PWA实践指南》 - 周八</li>
  </ul>
  <button class="show-more-btn">查看更多</button>
</div>

<!-- 第二期期刊 -->
<div class="issue-container">
  <h3>2024年第2期</h3>
  <ul class="article-list">
    <li>《React状态管理》 - 钱九</li>
    <li>《Vue3组件化开发》 - 吴十</li>
    <li>《Node.js后端实战》 - 郑十一</li>
    <li>《数据库优化技巧》 - 王十二</li>
    <!-- 隐藏的文章 -->
    <li class="hidden-article">《GraphQL入门》 - 冯十三</li>
    <li class="hidden-article">《微前端架构》 - 陈十四</li>
  </ul>
  <button class="show-more-btn">查看更多</button>
</div>

第二步：用CSS默认隐藏多余文章 #

.hidden-article {
  display: none;
}

第三步：绑定事件时基于上下文操作（推荐2种写法） #

写法1：事件委托（性能更好，支持动态添加的分组）

把事件绑定到父容器（甚至document），通过点击目标判断是不是“查看更多”按钮，再找到它所在的分组：

document.addEventListener('click', function(e) {
  // 确认点击的是查看更多按钮
  if (e.target.classList.contains('show-more-btn')) {
    // 找到当前按钮所在的期刊分组容器
    const currentIssue = e.target.closest('.issue-container');
    // 找到该分组内的所有隐藏文章
    const hiddenArticles = currentIssue.querySelectorAll('.hidden-article');
    
    // 切换显示状态，同时修改按钮文字
    hiddenArticles.forEach(article => {
      article.style.display = article.style.display === 'none' ? 'block' : 'none';
    });
    e.target.textContent = e.target.textContent === '查看更多' ? '收起' : '查看更多';
  }
});

写法2：给每个按钮单独绑定事件（适合分组数量少的场景）

// 获取所有查看更多按钮
const allButtons = document.querySelectorAll('.show-more-btn');

allButtons.forEach(button => {
  button.addEventListener('click', function() {
    // 通过当前按钮找到所属的分组容器
    const currentIssue = this.closest('.issue-container');
    const hiddenArticles = currentIssue.querySelectorAll('.hidden-article');
    
    // 切换显示状态
    hiddenArticles.forEach(article => {
      article.style.display = article.style.display === 'none' ? 'block' : 'none';
    });
    // 切换按钮文字
    this.textContent = this.textContent === '查看更多' ? '收起' : '查看更多';
  });
});

关键注意点 #

1. 永远不要给多个元素用相同的ID，类才是用来标识同类型元素的正确方式
2. 操作元素时，一定要基于当前触发事件的元素上下文（比如closest()方法）来查找目标，避免全局查找
3. 如果你的期刊分组是动态生成的（比如通过接口加载），优先用事件委托的写法，不然新添加的按钮会没有绑定事件

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