如何让Elementor自定义手风琴每次仅展开一个面板？

问题1：点击新面板时已展开面板不自动收起 #

你的JS逻辑缺少对其他已激活面板的批量处理，修改后的代码如下：

jQuery(document).ready(function($){
    $(".toggle-trigger").on("click", function(){
        let $this = $(this);
        let $content = $this.next(".toggle-content");

        // 当前面板已激活，直接收起
        if($this.hasClass('tab_active')){
            $this.removeClass('tab_active');
            $content.slideUp(200);
        } else {
            // 先收起所有其他激活面板并移除类
            $(".toggle-trigger.tab_active").removeClass('tab_active').next(".toggle-content").slideUp(200);
            // 激活当前面板并展开内容
            $this.addClass('tab_active');
            $content.slideDown(200);
        }
    })
});

改动说明： #

• 点击未激活面板时，先批量处理所有已激活的标题：移除激活类、收起对应内容
• 用addClass替代toggleClass，避免状态切换冲突
• 统一使用$符号（jQuery已将其作为参数传入，无需重复写jQuery）

问题2：展开面板时标题栏轻微上移 #

该问题源于内容区域展开时的浏览器重排，通过固定标题栏高度、优化布局即可解决，修改后的CSS如下：

body:not(.elementor-editor-active) .toggle-content{
    display: none;
    overflow: hidden; /* 避免内容收起时溢出 */
}

.toggle-trigger {
    cursor: pointer;
    min-height: 60px; /* 根据你的标题栏实际高度调整 */
    display: flex;
    align-items: center; /* 确保标题内容垂直居中，避免高度波动 */
}

.arrow i{
    transition-duration: 0.5s;
}

.tab_active .arrow i{
    transform: rotate(45deg) !important;
    transition-duration: 0.5s;
}

改动说明： #

• 给.toggle-trigger设置min-height（或固定height），强制标题栏保持固定高度，不受内容展开/收起影响
• 添加display: flex和align-items: center，确保标题内部元素垂直居中，避免排版导致的高度变化
• 给.toggle-content添加overflow: hidden，优化内容收起时的渲染效果

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