当前位置：首页 > 文章列表 > 文章 > 前端 > 动态展开折叠Div子元素的JS实现方法

动态展开折叠Div子元素的JS实现方法

2025-08-11 19:48:33 0浏览收藏

本文针对JavaScript动态展开折叠Div子元素时遇到的元素选择问题，提供了两种解决方案，旨在帮助开发者精确控制目标子元素。常见问题是`document.getElementById()`在存在多个相同ID元素时可能返回错误结果。方案一通过确保HTML结构中ID的唯一性，动态生成ID，例如`team_details1`、`team_details2`等。方案二则利用`document.getElementsByClassName()`避免ID冲突，并通过遍历父元素子元素的方式定位目标。此外，文章还提出了避免内联事件处理、缓存DOM元素、使用CSS类切换样式等代码优化建议，以提升代码可维护性和性能。无论采用哪种方案，都应根据实际应用场景和个人偏好进行选择，从而实现高效且可靠的动态DOM操作。

动态展开/折叠Div容器中的子元素：JavaScript教程

本文旨在解决在使用 JavaScript 动态展开和折叠包含特定子元素的 div 容器时，如何准确识别并操作目标子元素的问题。通常，document.getElementById() 可能会返回错误的元素，特别是当页面中存在多个具有相同 ID 的元素时。本文将介绍如何通过修改 HTML结构或利用 document.getElementsByClassName() 来实现精确控制。

解决子元素选择问题

在动态操作 DOM 元素时，准确选择目标元素至关重要。当页面中存在多个具有相同 ID 的元素时，document.getElementById() 会返回第一个匹配的元素，这可能导致意外的行为。以下提供了两种解决方案：

方案一：使用唯一的ID

问题： HTML 规范要求 ID 在整个文档中是唯一的。如果多个元素具有相同的 ID，浏览器行为可能不一致。

解决方案： 确保每个 team_details div 都有一个唯一的 ID。这可以通过在生成 HTML 时动态生成 ID 来实现，例如 team_details1、team_details2 等。

示例：

HTML:

<div class="event_container" data-index="0">
    <p style="display: inline-block; color: #000000; font-size: 14px;">Name of the event</p>
    <hr style="width: 90%">
    <div id="team_details_0" class="team_details" style="display: none;">
        <button class="btn_select_large">Create Team</button>
        <button class="btn_select_large">Singleplayer</button>
        <br>
        <div style="padding-top: 3px;">
            <div class="team_container">
                <p style="display: inline-block; font-size: 13px;">Team Name</p>
                <button class="btn_join_small">Join ></button>
            </div>
        </div>
        <div style="padding-top: 3px;">
            <div class="team_container">
                <p style="display: inline-block; font-size: 13px;">Team Name</p>
                <button class="btn_join_small">Join ></button>
            </div>
        </div>
    </div>
</div>

<div class="event_container" data-index="1">
    <p style="display: inline-block; color: #000000; font-size: 14px;">Name of the event</p>
    <hr style="width: 90%">
    <div id="team_details_1" class="team_details" style="display: none;">
        <button class="btn_select_large">Create Team</button>
        <button class="btn_select_large">Singleplayer</button>
        <br>
        <div style="padding-top: 3px;">
            <div class="team_container">
                <p style="display: inline-block; font-size: 13px;">Team Name</p>
                <button class="btn_join_small">Join ></button>
            </div>
        </div>
        <div style="padding-top: 3px;">
            <div class="team_container">
                <p style="display: inline-block; font-size: 13px;">Team Name</p>
                <button class="btn_join_small">Join ></button>
            </div>
        </div>
    </div>
</div>

JavaScript:

function unwrapEventContainer() {
    var coll = document.getElementsByClassName("event_container");
    var i;

    for (i = 0; i < coll.length; i++) {
        coll[i].addEventListener("click", function () {
            var index = this.getAttribute("data-index");
            var team = document.getElementById("team_details_" + index);
            this.classList.toggle("active");
            if (this.style.height === "70px") {
                this.style.height = "230px";
                // This opens child div
                team.style.display = "inline-block";
            } else {
                this.style.height = "70px";
                team.style.display = "none";
            }
        });
    }
}

unwrapEventContainer();

在这个示例中，我们使用 data-index 属性存储容器的索引，并在点击事件中获取该索引，然后使用该索引来构造唯一的 ID，从而正确获取 team_details div。

方案二：使用getElementsByClassName

优点： 避免了 ID 冲突的问题，更加灵活。

解决方案： 使用 document.getElementsByClassName() 获取所有具有 team_details 类的元素。然后，通过某种方式确定需要操作的元素的索引。一种常见的方法是遍历 event_container 的子元素，找到具有 team_details 类的元素。

示例：

HTML:

<div class="event_container">
    <p style="display: inline-block; color: #000000; font-size: 14px;">Name of the event</p>
    <hr style="width: 90%">
    <div class="team_details" style="display: none;">
        <button class="btn_select_large">Create Team</button>
        <button class="btn_select_large">Singleplayer</button>
        <br>
        <div style="padding-top: 3px;">
            <div class="team_container">
                <p style="display: inline-block; font-size: 13px;">Team Name</p>
                <button class="btn_join_small">Join ></button>
            </div>
        </div>
        <div style="padding-top: 3px;">
            <div class="team_container">
                <p style="display: inline-block; font-size: 13px;">Team Name</p>
                <button class="btn_join_small">Join ></button>
            </div>
        </div>
    </div>
</div>

<div class="event_container">
    <p style="display: inline-block; color: #000000; font-size: 14px;">Name of the event</p>
    <hr style="width: 90%">
    <div class="team_details" style="display: none;">
        <button class="btn_select_large">Create Team</button>
        <button class="btn_select_large">Singleplayer</button>
        <br>
        <div style="padding-top: 3px;">
            <div class="team_container">
                <p style="display: inline-block; font-size: 13px;">Team Name</p>
                <button class="btn_join_small">Join ></button>
            </div>
        </div>
        <div style="padding-top: 3px;">
            <div class="team_container">
                <p style="display: inline-block; font-size: 13px;">Team Name</p>
                <button class="btn_join_small">Join ></button>
            </div>
        </div>
    </div>
</div>

JavaScript:

function unwrapEventContainer() {
    var coll = document.getElementsByClassName("event_container");
    var i;

    for (i = 0; i < coll.length; i++) {
        coll[i].addEventListener("click", function () {
            this.classList.toggle("active");
            var team = this.querySelector(".team_details"); // Use querySelector to find the child
            if (this.style.height === "70px") {
                this.style.height = "230px";
                // This opens child div
                team.style.display = "inline-block";
            } else {
                this.style.height = "70px";
                team.style.display = "none";
            }
        });
    }
}

unwrapEventContainer();

在这个示例中，我们使用 this.querySelector(".team_details") 来查找当前点击的 event_container 中的 team_details 元素。这确保了我们始终操作正确的子元素。

代码优化建议

避免内联事件处理程序： 尽量避免在 HTML 中使用 onclick 属性。使用 addEventListener 将事件处理程序添加到 JavaScript 中，可以提高代码的可维护性和可读性。
缓存 DOM 元素： 在循环中频繁访问 DOM 元素可能会影响性能。将需要多次访问的 DOM 元素缓存到变量中，可以提高效率。
使用 CSS 类切换样式： 使用 JavaScript 直接修改元素的样式可能会导致代码冗余。使用 CSS 类来定义不同的样式状态，然后使用 JavaScript 切换这些类，可以使代码更简洁。
事件委托： 如果有大量相似的元素需要绑定事件，可以使用事件委托。将事件监听器添加到它们的父元素上，然后通过事件目标来确定哪个元素触发了事件。这可以减少事件监听器的数量，提高性能。