Divi WordPress自定义Toggle默认加载展开实现方法咨询

阿华AIGC实验室

2026-4-29

如何让自定义Divi Toggle默认处于展开状态？

我来帮你搞定这个问题！你之前只修改CSS却没生效，是因为只调整了内容的显示状态，但JS里的触发元素初始状态没同步，导致逻辑和样式不匹配。需要同时修改CSS默认显示规则和JS初始状态设置，具体步骤如下：

1. 调整CSS默认显示

把原来默认隐藏内容的CSS规则，改成默认显示：

<style>
.et-show-more-content { display:block; } /* 从none改为block，让内容默认展开 */
.et-fb .et-show-more-content { display:block; }
.et-show-more-toggle0 { cursor:pointer; }
</style>

2. 同步JS初始状态

页面加载时，要给触发文本设置好「展开状态」对应的样式和类名，确保和内容的显示状态匹配。修改后的JS代码如下：

<script>
(function($) {
  $(document).ready(function() {
    // 初始化默认展开状态：设置触发元素的样式和active类
    const $toggleElement = $('.et-show-more-toggle0');
    $toggleElement.addClass('et-show-more-toggle0_active');
    $toggleElement.text('vorwort');
    $toggleElement.css('text-align','left');
    $toggleElement.css('color', '#4d4b40');

    // 保留原有的点击切换逻辑
    $toggleElement.on('click', function(e) {
      $(e.target).closest('.et-show-more-container').children('.et-show-more-content').slideToggle("300");
      $(this).toggleClass('et-show-more-toggle0_active');
      
      if ($(this).hasClass('et-show-more-toggle0_active')) {
        $(this).text('vorwort');
        $(this).css('text-align','left');
        $(this).css('color', '#4d4b40');
      } else {
        $(this).text('vorwort');
        $(this).css('text-align','left');
        $(this).css('color', '#dc1250');
      }
    });
  });
})(jQuery);
</script>