如何实现点击打开新的Accordion手风琴项时自动关闭已打开的项

嘿，我来帮你搞定这个手风琴的问题！你现在的代码核心问题在于混合原生JS和jQuery时，jQuery那行的选择器写错了——$('')是空选择器，根本没选中其他手风琴项，所以没法移除它们的active类。下面给你两种可行的解决方案：

方案一：纯原生JavaScript实现 #

这种方式不需要依赖jQuery，逻辑清晰直接：

const accordionItems = document.getElementsByClassName('contentBx');
for (let i = 0; i < accordionItems.length; i++) {
  accordionItems[i].addEventListener('click', function() {
    // 先关闭所有非当前点击的手风琴项
    for (let j = 0; j < accordionItems.length; j++) {
      if (accordionItems[j] !== this) {
        accordionItems[j].classList.remove('active');
      }
    }
    // 切换当前项的展开/收起状态
    this.classList.toggle('active');
  });
}

逻辑说明： #

1. 先获取所有手风琴项的DOM元素
2. 给每个项绑定点击事件
3. 点击时遍历所有项，移除除当前项外所有元素的active类
4. 最后切换当前项的active类，实现单一展开的效果

方案二：利用jQuery简化代码 #

既然你已经引入了jQuery，用它来写会更简洁：

$('.contentBx').on('click', function() {
  // 移除所有非当前元素的active类
  $('.contentBx').not(this).removeClass('active');
  // 切换当前元素的active类
  $(this).toggleClass('active');
});

逻辑说明： #

• $('.contentBx').not(this) 精准选中除当前点击项外的所有手风琴元素
• 调用removeClass('active')关闭这些项
• 最后用toggleClass('active')切换当前项的状态

你的CSS和HTML代码都是没问题的，只需要把原来的JavaScript代码替换成上面任意一种方案即可，就能实现点击某一项时自动关闭其他已展开项的效果啦！

内容的提问来源于stack exchange，提问作者C-delb