JS初学者求助：点击按钮关闭其他section并切换目标section

需求说明 #

入门学习JavaScript，需要实现：点击按钮时关闭所有已展开的section，同时通过toggleSection()函数切换目标section的显示状态。此前尝试的逻辑会误关目标section，Bootstrap方案未成功。

修正后的HTML代码（移除原代码多余闭合标签，添加统一控制类） #

<body>
      <section id="features" class="none">
        <div class="content">
            <div class="single-item">
              <div><h3 class="kat_slick"><button type="button" onclick="toggleSection('kat')"> <img src="0full.jpg" alt=""> Katarina</button></h3></div>
                <div><h3 class="mercenarykat_slick"><button type="button" onclick="toggleSection('mercenary')"> <img src="1full.jpg" alt="">Katarina Mercenaire</button></h3></div>
                <div><h3 class="redcardkat_slick"><button type="button" onclick="toggleSection('redcard')"> <img src="2full.jpg" alt="">Katarina Carton Rouge</button></h3></div>
                <div><h3 class="bilgewaterkat_slick"><button type="button" onclick="toggleSection('bilgewater') "> <img src="3full.jpg" alt="">Katarina de Bilgewater</button></h3></div>
                <div><h3 class="kittykat_slick"><button type="button" class="blyat" onclick="toggleSection('kittykat')"> <img src="4full.jpg" alt="">Katarina Mistigri</button></h3></div>
                <div><h3 class="highcommandkat_slick"><button type="button" onclick="toggleSection('highcommand')"> <img src="5full.jpg" alt="">Katarina du Haut Commandement</button></h3></div>
                <div><h3 class="sandstormkatkat_slick"><button type="button" onclick="toggleSection('sandstorm')"> <img src="6full.jpg" alt="">Katarinadu Désert</button></h3></div>
                <div><h3 class="slaybellekat_slick"><button type="button" onclick="toggleSection('slaybelle')"> <img src="7full.jpg" alt="">Katarinadu Sucre d'Orge</button></h3></div>
                <div><h3 class="warringkingdomkat_slick"><button type="button" onclick="toggleSection('warringkingdom')"> <img src="8full.jpg" alt="">Katarinadu du Royaume en Guerre</button></h3></div>
                <div><h3 class="projectkat_slick"><button type="button" onclick="toggleSection('project')"> <img src="9full.jpg" alt="">Project : Katarina</button></h3></div>
                <div><h3 class="deathswormkat_slick"><button type="button" onclick="toggleSection('deathsworm')"> <img src="10full.jpg" alt="">Katarina Tanatophore</button></h3></div>
                <div><h3 class="battleacademiakat_slick"><button type="button" onclick="toggleSection('battleacademia')"> <img src="11full.jpg" alt="">Katarina de l'Académie de Combat</button></h3></div>
                <div><h3 class="bloodmoonkat_slick"><button type="button" onclick="toggleSection('bloodmoon')"> <img src="12full.jpg" alt="">Katarina Lune de Sang</button></h3></div>
                <div><h3 class="battlequeenkat_slick"><button type="button" onclick="toggleSection('battlequeen')"> <img src="13full.jpg" alt="">Katarina Reine du Combat</button></h3></div>
                <div><h3 class="highnoonkat_slick"><button type="button" onclick="toggleSection('highnoon')"> <img src="14full.jpg" alt="">Katarina de l'Ouest</button></h3></div>
              </div>
            </div>
          </div>
        </section>  
        <section id="kat" class="toggle-section" style="display:none;"> <img src="0full.jpg" alt="">  </section>
        <section id="mercenary" class="toggle-section" style="display:none;"> <img src="1full.jpg" alt="">  </section>
        <section id="redcard" class="toggle-section" style="display:none;"> <img src="2full.jpg" alt="">  </section>
        <section id="bilgewater" class="toggle-section" style="display:none;"> <img src="3full.jpg" alt="">  </section>
        <section id="kittykat" class="toggle-section" style="display:none;"> <img src="4full.jpg" alt="">  </section>
        <section id="highcommand" class="toggle-section" style="display:none;"> <img src="5full.jpg" alt="">  </section>
        <section id="sandstorm" class="toggle-section" style="display:none;"> <img src="6full.jpg" alt="">  </section>
        <section id="slaybelle" class="toggle-section" style="display:none;"> <img src="7full.jpg" alt="">  </section>
        <section id="warringkingdom" class="toggle-section" style="display:none;"> <img src="8full.jpg" alt="">  </section>
        <section id="project" class="toggle-section" style="display:none;"> <img src="9full.jpg" alt="">  </section>
        <section id="deathsworm" class="toggle-section" style="display:none;"> <img src="10full.jpg" alt="">  </section>
        <section id="battleacademia" class="toggle-section" style="display:none;"> <img src="11full.jpg" alt="">  </section>
        <section id="bloodmoon" class="toggle-section" style="display:none;"> <img src="12full.jpg" alt="">  </section>
        <section id="battlequeen" class="toggle-section" style="display:none;"> <img src="13full.jpg" alt="">  </section>
        <section id="highnoon" class="toggle-section" style="display:none;"> <img src="14full.jpg" alt="">  </section>
</body>

最终JavaScript实现代码 #

function toggleSection(targetId) {
    // 获取所有需要控制的section节点
    const allSections = document.querySelectorAll('.toggle-section');
    // 获取当前点击对应的目标section
    const targetSection = document.getElementById(targetId);
    
    // 遍历关闭所有非目标section
    allSections.forEach(section => {
        if (section.id !== targetId) {
            section.style.display = 'none';
        }
    });
    
    // 切换目标section的显示状态
    targetSection.style.display = targetSection.style.display === 'none' ? 'block' : 'none';
}

核心逻辑说明 #

• 给所有需要控制的section添加统一类名toggle-section，避免硬编码所有ID，简化批量操作
• 先遍历关闭所有非目标section，再切换目标section的状态，彻底避免误关问题
• 纯原生JavaScript实现，无需依赖jQuery或Bootstrap，适合入门阶段理解DOM操作

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