Elementor中jQuery脚本二次点击隐藏问题求助

问题根源 #

你的代码里用了toggle()方法，这个方法会切换元素的显示状态——当板块已经显示时，再次点击按钮触发toggle()就会把它隐藏，这就是问题的核心原因。

修改后的完整代码 #

<script>
document.addEventListener('DOMContentLoaded', function() {
    jQuery(function($){
        // 处理"完整方案"按钮逻辑
        $('.botaocompleto').each(function(i){
            $(this).click(function(){
                var $completo = $('.planocompleto').eq(i);
                var $basico = $('.planobasico').eq(i);
                // 仅当完整方案板块隐藏时才显示它，已显示则保持状态
                if($completo.is(':hidden')){
                    $completo.show();
                }
                // 确保基础方案板块始终隐藏
                $basico.hide();
            });
        });

        // 处理"基础方案"按钮逻辑
        $('.botaobasico').each(function(i){
            $(this).click(function(){
                var $basico = $('.planobasico').eq(i);
                var $completo = $('.planocompleto').eq(i);
                // 仅当基础方案板块隐藏时才显示它，已显示则保持状态
                if($basico.is(':hidden')){
                    $basico.show();
                }
                // 确保完整方案板块始终隐藏
                $completo.hide();
            });
        });
    });
});
</script>
<style>
.botaocompleto, .botaobasico{
    cursor: pointer;
}
.planocompleto{
    display: block;
}
.planobasico{
    display: none;
}
</style>

改动说明 #

1. 合并了重复的<script>和<style>标签，避免重复监听页面加载事件，代码更简洁
2. 把toggle()替换为条件判断+show()：只有目标板块处于隐藏状态时才执行显示操作，已显示则不切换状态
3. 保留对另一板块的hide()操作，确保同一组内始终只有一个板块显示

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