如何为div特定子元素实现展开/收起切换？优化Elementor手风琴JS代码

DevOps 小满

2026-8-22

优化Elementor手风琴特定子元素的切换逻辑（循环简化版）

原代码的问题点

重复调用document.querySelector获取相同元素，冗余且影响性能
拆分showMore和showLess函数，代码逻辑高度重复
每次切换时重复绑定事件，可能导致多次触发问题
CSS选择器未限定父元素作用域，可能影响其他元素

优化方案

用循环批量处理目标元素，合并切换逻辑为单一函数，同时优化CSS选择器和事件绑定方式：

优化后的CSS

/* 简洁选中第5到第7个div子元素 */
.acc-sec > div:nth-child(n+5) {
    display: none;
}
#acc-more {
    cursor: pointer;
}

优化后的HTML

<div class="acc-sec">
    <div>This is the first div.</div>
    <div>This is the second div.</div>
    <div>This is the third div.</div>
    <div>This is the fourth div.</div>
    <div id="hidden1">This is the fifth div.</div>
    <div id="hidden2">This is the sixth div.</div>
    <div id="hidden3">This is the seventh div.</div>
    <a id="acc-more">Show more</a>
</div>

优化后的JavaScript

// 一次性获取所有需要切换的元素和按钮
const toggleBtn = document.getElementById('acc-more');
const hiddenDivs = document.querySelectorAll('.acc-sec > div:nth-child(n+5)');

// 单一切换函数
function toggleAccordion() {
    const isShowingMore = toggleBtn.textContent === 'Show more';
    
    // 循环处理所有目标div
    hiddenDivs.forEach(div => {
        div.style.display = isShowingMore ? 'block' : 'none';
    });
    
    // 切换按钮文本
    toggleBtn.textContent = isShowingMore ? 'Show less' : 'Show more';
}

// 只绑定一次点击事件
toggleBtn.addEventListener('click', toggleAccordion);