实现无jQuery的平滑展开/收起下拉Banner及三角图标状态切换

问题出在你直接操作父元素的textContent，这会覆盖掉父元素内的所有子节点（包括下拉容器）。要解决这个问题，需要把可切换的文本和图标单独封装到一个独立元素中，避免影响下拉容器。

修改后的完整代码 #

HTML

<div class="dropdown-wrapper">
    <div class="btn-dropdown">
        <span class="toggle-text">Show ▼</span>
        <div class="dropdown-content-container">
            <!-- Banner内容示例 -->
            <div style="padding:20px; background:#f5f5f5;">这是展开的Banner内容</div>
        </div>
    </div>
</div>

CSS

.btn-dropdown {
    position: relative;
    cursor: pointer;
    padding: 8px 16px;
    border: 1px solid gray;
}
 
.dropdown-content-container {
    overflow-y: hidden;
    max-height: 0;
    transition: all 0.5s ease;
}
 
.btn-dropdown.open > .dropdown-content-container {
    max-height: 500px;
}

JavaScript

const btns = document.querySelectorAll('.btn-dropdown')

btns.forEach(btn => {
    const toggleText = btn.querySelector('.toggle-text')
    btn.addEventListener('click', function() {
        this.classList.toggle('open')
        if (this.classList.contains('open')) {
            toggleText.textContent = 'Hide ▲'
        } else {
            toggleText.textContent = 'Show ▼'
        }
    })
})

关键修改说明 #

1. HTML结构优化：新增<span class="toggle-text">包裹可切换的文本和图标，确保修改文本时不会影响下拉容器。
2. CSS简化：移除固定height属性，仅通过max-height实现平滑过渡，避免内容高度变化时出现适配问题，同时调整过渡时长让动画更自然。
3. JavaScript逻辑修正：
   • 通过querySelector获取独立的文本元素，避免操作父元素的全部内容。
   • 根据open类的存在状态，精准切换文本和图标内容，逻辑清晰且不会破坏DOM结构。

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