JavaScript折叠面板优化需求：点击新面板自动关闭已打开面板

原代码问题分析 #

原代码存在重复冗余问题，且未实现面板互斥展开的需求——点击新触发元素时，已展开的面板不会自动关闭。另外还有一处语法错误：e.preventDefault未调用方法（缺少()），导致阻止默认行为的逻辑不生效。

优化后的实现方案 #

方案1：通过data-target属性关联元素（推荐，扩展性更强） #

先修改HTML结构，给每个触发元素添加data-target属性，明确指向对应的内容区域：

<!-- 触发元素 -->
<button class="secenek-1" data-target=".secenek-1-kismi">选项1</button>
<button class="secenek-2" data-target=".secenek-2-kismi">选项2</button>
<button class="secenek-3" data-target=".secenek-3-kismi">选项3</button>

<!-- 内容区域 -->
<div class="secenek-1-kismi">选项1对应的内容</div>
<div class="secenek-2-kismi">选项2对应的内容</div>
<div class="secenek-3-kismi">选项3对应的内容</div>

然后编写优化后的JavaScript代码：

// 获取所有带data-target属性的触发元素
const triggers = document.querySelectorAll('[data-target]');
// 获取所有内容区域（匹配以-kismi结尾的类名）
const contentPanels = document.querySelectorAll('[class$="-kismi"]');

triggers.forEach(trigger => {
  trigger.addEventListener('click', function(e) {
    // 修正原代码错误：调用preventDefault方法阻止默认行为
    e.preventDefault();
    
    // 获取当前触发元素对应的目标内容区域
    const targetSelector = this.getAttribute('data-target');
    const targetPanel = document.querySelector(targetSelector);
    // 判断当前面板是否处于展开状态
    const isExpanded = targetPanel.classList.contains('showing');

    // 第一步：关闭所有已展开的面板
    contentPanels.forEach(panel => {
      panel.classList.remove('showing');
    });

    // 第二步：如果当前面板原本是收起的，就展开它；如果原本是展开的，保持关闭
    if (!isExpanded) {
      targetPanel.classList.add('showing');
    }
  });
});

方案2：通过类名关联元素（无需修改HTML） #

如果不想调整HTML结构，可以通过触发元素的类名提取编号，匹配对应的内容区域：

// 获取所有以secenek-开头的触发元素
const triggers = document.querySelectorAll('[class^="secenek-"]');

triggers.forEach(trigger => {
  trigger.addEventListener('click', function(e) {
    e.preventDefault();
    
    // 从类名中提取数字编号（比如secenek-1 → 1）
    const panelNum = this.className.match(/secenek-(\d+)/)[1];
    const targetPanel = document.querySelector(`.secenek-${panelNum}-kismi`);
    const isExpanded = targetPanel.classList.contains('showing');

    // 关闭所有面板
    document.querySelectorAll('[class$="-kismi"]').forEach(panel => {
      panel.classList.remove('showing');
    });

    // 切换当前面板状态
    if (!isExpanded) {
      targetPanel.classList.add('showing');
    }
  });
});

关键优化点 #

• 批量处理元素：避免重复编写3次几乎相同的事件监听代码，后续新增选项时无需修改JS。
• 实现互斥逻辑：点击触发元素时先统一关闭所有面板，再根据当前面板状态决定是否展开，确保同一时间只有一个面板处于展开状态。
• 修复语法错误：修正e.preventDefault的调用方式，保证阻止默认行为的逻辑生效。
• 扩展性提升：方案1使用data-target属性，触发元素和内容区域的关联更清晰，后续调整类名或新增面板时更灵活。

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