WordPress Elementor中如何用不同div内的按钮控制另一div显隐

针对Elementor跨区块控制显隐的需求，提供CSS和JavaScript两种可选方案，优先推荐JavaScript方案，兼容性更强，不受DOM层级限制。

前置操作（两种方案都需要完成） #

进入Elementor编辑器，给对应元素设置自定义ID（在元素「高级」选项卡的「CSS ID」字段填写）：

• 触发按钮所在的元素（可以是按钮本身或者第一个section区块）设置ID为 toggle-trigger-btn
• 需要控制显隐的第二个section区块设置ID为 toggle-target-section

方案1：CSS实现（有层级限制） #

仅适用场景：两个section区块在DOM结构中为平级关系，且触发区块在目标区块的前面。
把以下CSS代码添加到WordPress后台「外观」-「自定义」-「额外CSS」中即可：

/* 初始状态隐藏目标区块 */
#toggle-target-section {
    display: none;
}
/* 点击按钮后显示目标区块，若需要永久切换状态，可在触发区块内加一个隐藏的checkbox，搭配label作为按钮使用 */
#toggle-trigger-btn:active ~ #toggle-target-section {
    display: block;
}

方案2：JavaScript实现（无限制，推荐） #

以下代码可直接复制到当前主题的functions.php文件末尾，无需额外修改即可使用：

add_action('wp_footer', 'custom_elementor_toggle_section', 999);
function custom_elementor_toggle_section() {
    // 仅在前台页面加载代码
    if (is_admin()) return;
    ?>
    <script>
    document.addEventListener('DOMContentLoaded', function() {
        const toggleBtn = document.getElementById('toggle-trigger-btn');
        const targetSection = document.getElementById('toggle-target-section');
        if (!toggleBtn || !targetSection) return;
        // 初始状态设置，默认隐藏，需要默认显示请把none改为block
        targetSection.style.display = 'none';
        toggleBtn.addEventListener('click', function() {
            targetSection.style.display = targetSection.style.display === 'none' ? 'block' : 'none';
        });
    });
    </script>
    <?php
}

使用说明 #

• 如果需要调整默认显隐状态，修改JS代码中targetSection.style.display = 'none'的属性值即可
• 如果需要修改触发/目标元素的ID，同步修改JS代码中getElementById对应的参数即可

内容的提问来源于stack exchange，提问作者Clément