如何修改JS手风琴代码实现页面加载时默认激活第一个面板

问题现状 #

现有手风琴组件已实现点击切换展开/收起的交互，但无法实现页面加载完成后第一个手风琴项默认激活展开的效果：仅手动在HTML中给首个项添加active类时，无法正确设置内容区高度，导致默认展开状态显示异常。

现有实现代码 #

HTML结构 #

<div class="accordion_container">
    <div class="container">
        <div class="accordion">
            <button class="header">
                Úvod
                <i class="icon"></i>
            </button>
            <div class="body">
                Lorem Ipsum
            </div>
        </div>
        <div class="accordion">
            <button class="header">
                Závěr
                <i class="icon"></i>
            </button>
            <div class="body">
                Lorem Ipsum
            </div>
        </div>
    </div>
</div>

交互脚本 #

let accordion_btns  = document.querySelectorAll('.accordion_container .accordion .header'),
    accordion_bodys = document.querySelectorAll('.accordion_container .accordion .body');

if(accordion_btns && accordion_bodys)
{
    accordion_btns = Array.isArray(accordion_btns) ? accordion_btns : Object.values(accordion_btns);
    accordion_btns.forEach(accordion_btn=>{
        accordion_btn.addEventListener('click', function(){
            process_accordion(this);
        });
    });

    function process_accordion(x) {
        set_height_0();

        let next_sibling = x.nextElementSibling;
        if(next_sibling.offsetHeight>0)
        {
            next_sibling.style.height = '0px';
            x.closest('.accordion').classList.remove('active');
        } else {
            next_sibling.style.height = next_sibling.scrollHeight+30+'px';
            x.closest('.accordion').classList.add('active');
        }
    }

    function set_height_0() {
        accordion_bodys = Array.isArray(accordion_bodys) ? accordion_bodys : Object.values(accordion_bodys);
        accordion_bodys.forEach(accordion_body=>{
            accordion_body.style.height = '0px';
            accordion_body.closest('.accordion').classList.remove('active');
        });
    }
}

问题原因 #

手风琴的展开/收起完全依赖JS动态给.body元素设置行内height样式实现，初始页面加载时没有触发高度计算逻辑，所有.body默认高度为0。手动在HTML上加active类只能修改类名，无法触发行内高度的计算和赋值，且行内样式优先级高于CSS类样式，就算CSS中给.active .body设置了高度，也会被行内的height: 0px覆盖，最终显示异常。

修改方法 #

不需要修改HTML结构，也不需要手动给首个项加active类，只需要在JS完成事件绑定后，主动调用已有的展开逻辑处理第一个手风琴项即可，改动量极小。
在原有JS的if(accordion_btns && accordion_bodys)逻辑块末尾（两个工具函数定义完成之后）添加如下代码：

// 初始化默认展开第一个手风琴项
if(accordion_btns.length) {
    process_accordion(accordion_btns[0]);
}

修改后完整JS代码 #

let accordion_btns  = document.querySelectorAll('.accordion_container .accordion .header'),
    accordion_bodys = document.querySelectorAll('.accordion_container .accordion .body');

if(accordion_btns && accordion_bodys)
{
    accordion_btns = Array.isArray(accordion_btns) ? accordion_btns : Object.values(accordion_btns);
    accordion_btns.forEach(accordion_btn=>{
        accordion_btn.addEventListener('click', function(){
            process_accordion(this);
        });
    });

    function process_accordion(x) {
        set_height_0();

        let next_sibling = x.nextElementSibling;
        if(next_sibling.offsetHeight>0)
        {
            next_sibling.style.height = '0px';
            x.closest('.accordion').classList.remove('active');
        } else {
            next_sibling.style.height = next_sibling.scrollHeight+30+'px';
            x.closest('.accordion').classList.add('active');
        }
    }

    function set_height_0() {
        accordion_bodys = Array.isArray(accordion_bodys) ? accordion_bodys : Object.values(accordion_bodys);
        accordion_bodys.forEach(accordion_body=>{
            accordion_body.style.height = '0px';
            accordion_body.closest('.accordion').classList.remove('active');
        });
    }

    // 新增：初始化默认展开第一个手风琴项
    if(accordion_btns.length) {
        process_accordion(accordion_btns[0]);
    }
}

注意：如果你的脚本是放在HTML的<head>标签中执行，需要把整段逻辑包裹在DOMContentLoaded事件回调中，确保DOM渲染完成后再获取元素、绑定事件和初始化展开状态，避免获取不到节点的问题。

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