如何实现可折叠div？仿select语言选择框折叠失效问题求助

问题原因 #

1. 元素获取错误：document.getElementsByClassName("languageContainer")返回的是HTMLCollection元素集合，不是单个DOM元素，直接访问content.style.display会触发错误，无法正常操作样式。
2. 样式判断逻辑失效：.languageContainer的display: none是通过CSS类定义的，并非元素的内联样式，因此content.style.display初始值为空，导致content.style.display === "block"的判断条件永远不成立。

修复后的代码 #

HTML

<button class="languageSelect"><img class="selectedLanguageFlag" src="images/language_sk_flag.png" /></button>
<div id="languageContainer" class="languageContainer">
    <button><img src="images/language_cz_flag.png"/></button>
</div>

CSS

.languageSelect {
    overflow: hidden;
    background-color: #6bca56;
    height: 100px;
    width: 100px;
    position: absolute;
    left: 0 !important;
    top: 0 !important;
    border: none;
    cursor: pointer; /* 添加鼠标指针，提示可点击 */
}

.languageSelect:hover {
    background-color: #5cae4a;
}

.selectedLanguageFlag {
    overflow: hidden;
    width: 45%;
    height: 30%;
    position: relative;
    left: 10px;
    top: 0%;
    display: block;
}

.languageContainer {
    z-index: 2;
    position: absolute;
    background-color: #5cae4a;
    left: 0!important;
    top: 100px !important;
    width: 100px;
    display: none;
}

JavaScript

var coll = document.getElementsByClassName("languageSelect");
var i;

for (i = 0; i < coll.length; i++) {
    coll[i].addEventListener("click", function () {
        this.classList.toggle("active");
        // 通过ID获取单个容器元素，避免集合操作问题
        var content = document.getElementById("languageContainer");
        // 获取元素计算后的显示状态，兼容CSS类定义的样式
        var isDisplayed = window.getComputedStyle(content).display === "block";
        content.style.display = isDisplayed ? "none" : "block";
    });
}

优化建议（更优雅的实现方式） #

用CSS类切换替代直接操作样式，符合样式与逻辑分离的原则：

1. 在CSS中新增类：

.languageContainer.show {
    display: block;
}

2. 修改JavaScript代码：

var coll = document.getElementsByClassName("languageSelect");
var i;
// 提前获取容器元素，避免重复查询DOM
var content = document.getElementById("languageContainer");

for (i = 0; i < coll.length; i++) {
    coll[i].addEventListener("click", function () {
        this.classList.toggle("active");
        content.classList.toggle("show");
    });
}

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