如何让Divi手风琴模块的最后一个项目默认展开

在使用Divi主题构建页面时，手风琴模块（accordion module）常用来折叠展示多块内容。默认所有项目都是收起的，但有些场景需要让最后一个项目在打开页面时就处于展开状态，比如把联系方式放在最后并直接露出。下面介绍一种简单稳定的实现方式。

为什么不能直接用CSS

手风琴的展开状态由Divi的脚本控制，它会在切换时给对应元素添加或移除特定的类与内联样式。如果只写CSS强制最后一个项目显示，当用户点击其他项目时，脚本的逻辑可能会出错，或者最后一项无法被正常收起。因此用少量jQuery在加载后触发展开是最稳妥的做法。

实现步骤

1. 确认模块结构

Divi手风琴模块在前端渲染后，每个项目通常包含类 et_pb_accordion_item，整个容器为 et_pb_accordion。最后一个项目就是容器内的最后一个 et_pb_accordion_item。

2. 添加jQuery代码

你可以把以下代码放到子主题的 scripts.js 中，或通过Divi主题选项里的“集成”选项卡加到 body 结束前。代码会在页面就绪后找到最后一个手风琴项并展开它。

jQuery(document).ready(function($) {
  // 找到页面中所有手风琴模块
  $('.et_pb_accordion').each(function() {
    // 获取该模块内的最后一个项目
    var $lastItem = $(this).find('.et_pb_accordion_item').last();
    // 如果该项尚未展开，则模拟点击标题以展开
    if (!$lastItem.hasClass('et_pb_active')) {
      $lastItem.find('.et_pb_toggle_title').trigger('click');
    }
  });
});

3. 只针对特定页面

如果你只想在某个页面生效，可以给该页面的手风琴模块加一个自定义CSS类，例如 my-accordion，然后把选择器改成 $('.my-accordion') 即可。

注意事项

• 请使用子主题或代码注入功能，避免Divi更新后丢失改动。
• 如果网站开启了缓存，添加代码后请清空缓存再测试。
• 若手风琴内容由动态数据生成，确保脚本在内容加载后执行，可把代码放在窗口加载事件中。

小结

通过上面这段jQuery，我们就能轻松实现让Divi手风琴模块的最后一个项目默认展开。相比纯CSS方案，这种方法不会破坏模块自身的交互逻辑，维护起来也简单。

Diviaccordion_moduledefault_expand修改时间：2026-07-29 19:33:16