本教程旨在详细指导如何在Divi手风琴（Accordion）模块中，通过注入自定义JavaScript代码，实现让其最后一个项目在页面加载时默认保持展开状态。文章将涵盖代码实现、放置位置及注意事项，确保手风琴功能按预期工作，提升用户体验。
Divi手风琴模块默认行为概述
Divi主题中的手风琴模块（Accordion Module）是一个常用的内容组织工具，它允许将多个内容块折叠起来，用户点击标题时内容才会展开。默认情况下，Divi手风琴模块通常会加载为所有项目都处于折叠状态，或者根据其设置，只允许一个项目展开，但没有直接的内置选项可以指定某个特定项目（例如最后一个）在页面加载时就默认展开。
当需要改变这种默认行为，例如为了强调某个特定信息或引导用户查看最新的内容时，就需要借助自定义代码来实现。由于Divi手风琴的展开/折叠状态是由JavaScript动态控制其CSS类（如et_pb_toggle_open和et_pb_toggle_close）和内容区域的显示属性来实现的，因此，最可靠的解决方案是使用JavaScript（特别是jQuery，因为Divi内置了jQuery）来模拟用户点击或直接修改这些状态。
实现方案：使用JavaScript（jQuery）
为了让Divi手风琴模块的最后一个项目默认展开，我们需要编写一段jQuery代码。这段代码会在页面加载完成后执行，找到目标手风琴模块中的最后一个项目，并将其设置为展开状态。
示例代码
请将以下代码添加到您的网站中。建议将其放置在Divi主题选项的“集成”设置中，或者通过子主题的functions.php文件加载。
jQuery(document).ready(function($) {
// 遍历页面上所有的Divi手风琴模块
// 如果您只想针对特定的手风琴模块，请为其添加一个自定义CSS类（例如 'my-custom-accordion'），
// 然后将 '.et_pb_accordion' 替换为 '.my-custom-accordion'。
$('.et_pb_accordion').each(function() {
var $accordion = $(this);
var $toggles = $accordion.find('.et_pb_toggle');
// 确保所有手风琴项目在操作前都处于折叠状态
// 这一步很重要，可以避免与Divi自身的JS冲突，并确保我们从一个已知状态开始
$toggles.removeClass('et_pb_toggle_open').addClass('et_pb_toggle_close');
$toggles.find('.et_pb_toggle_content').slideUp(0); // 立即隐藏内容，无动画
// 找到当前手风琴模块中的最后一个项目
var $lastToggle = $toggles.last();
// 将最后一个项目设置为展开状态
$lastToggle.removeClass('et_pb_toggle_close').addClass('et_pb_toggle_open');
$lastToggle.find('.et_pb_toggle_content').slideDown(); // 动画展开内容
});
});代码解析
- jQuery(document).ready(function($) { ... });: 这是jQuery的标准写法，确保在DOM（文档对象模型）完全加载和解析后才执行内部的代码。这可以防止脚本在尝试访问尚未存在的HTML元素时出错。$作为jQuery的别名传入，方便代码编写。
-
$('.et_pb_accordion').each(function() { ... });: 这行代码选择页面上所有带有et_pb_accordion类的元素。et_pb_accordion是Divi手风琴模块的默认CSS类。each()函数用于遍历这些模块，确保如果页面上有多个手风琴模块，每个模块都能被正确处理。
- 针对特定手风琴模块: 如果您只想让某个特定的手风琴模块的最后一个项目展开，而不是所有手风琴，您可以在Divi编辑器中给该手风琴模块添加一个自定义CSS类（例如，在“高级”选项卡下的“CSS ID和类”中添加my-custom-accordion）。然后将选择器从$('.et_pb_accordion')更改为$('.my-custom-accordion')。
- var $accordion = $(this);: 在each()循环内部，this指向当前正在处理的手风琴模块DOM元素。$(this)将其封装成jQuery对象，方便后续操作。
- var $toggles = $accordion.find('.et_pb_toggle');: 查找当前手风琴模块内部所有带有et_pb_toggle类的元素。et_pb_toggle是手风琴中每个可点击的标题项的CSS类。
- $toggles.removeClass('et_pb_toggle_open').addClass('et_pb_toggle_close');: 这一步是关键的初始化操作。它确保所有手风琴项目都先被强制设置为折叠状态。removeClass('et_pb_toggle_open')移除展开状态的类，addClass('et_pb_toggle_close')添加折叠状态的类。
- $toggles.find('.et_pb_toggle_content').slideUp(0);: 找到所有手风琴项目的内容区域（通常带有et_pb_toggle_content类），并使用slideUp(0)立即（无动画）将其隐藏。这与上一步共同作用，确保所有项目都从折叠状态开始。
- var $lastToggle = $toggles.last();: 使用.last()方法从所有$toggles中选择最后一个元素。这就是我们希望默认展开的目标项目。
- $lastToggle.removeClass('et_pb_toggle_close').addClass('et_pb_toggle_open');: 移除最后一个项目的折叠类，并添加展开类，使其在视觉上呈现展开状态。
- $lastToggle.find('.et_pb_toggle_content').slideDown();: 找到最后一个项目的内容区域，并使用slideDown()方法动画地将其展开。这提供了更平滑的用户体验。
代码放置位置
在Divi中，有几种推荐的方式来添加自定义JavaScript代码：
-
Divi主题选项 -> 集成 -> 在中添加代码 (或 结束前)：
- 推荐位置: 通常，将此代码放置在“将代码添加到您的的末尾”区域更合适。这样可以确保在所有HTML元素都加载完毕后再执行脚本，避免潜在的错误。
- 操作步骤: 登录WordPress后台 -> 导航到 Divi -> 主题选项 -> 点击 集成 选项卡。在“将代码添加到您的的末尾 (适用于跟踪代码等)”文本区域中粘贴上述JavaScript代码。
-
使用子主题的 functions.php 文件:
如果您正在使用Divi子主题，可以将JavaScript代码添加到子主题的functions.php文件中，通过WordPress的wp_enqueue_script钩子来加载。这种方式更专业，也更容易管理。
-
示例 (添加到子主题的 functions.php):
请确保在添加代码时，用实际的JavaScript代码替换注释部分。
-
页面或文章的自定义JS模块:
- 在Divi Builder中，您可以在特定页面或文章中添加一个“代码”模块，并将JavaScript代码放在其中。这种方法只对放置代码的页面有效。
注意事项
- 缓存清除: 添加代码后，如果更改没有立即生效，请务必清除您的网站缓存（包括Divi缓存、插件缓存和浏览器缓存）。
- jQuery冲突: Divi已经加载了jQuery。请始终使用jQuery而不是$作为主调用，或者如示例所示，将$作为参数传入ready函数，以避免与其他可能使用$符号的库发生冲突。
- CSS优先级: 虽然我们通过JS操作类来控制显示，但如果存在更高优先级的CSS规则直接设置了display属性，可能会覆盖JS的效果。请检查您的自定义CSS或主题CSS，确保没有冲突的规则。
- 性能影响: 尽管这段代码很小，但任何自定义JavaScript都会对页面加载性能产生轻微影响。对于大多数网站来说，这种影响可以忽略不计。
- 未来更新: Divi主题的未来更新可能会改变手风琴模块的内部结构或CSS类名。如果更新后代码失效，您可能需要检查Divi的最新HTML结构并相应地调整选择器。
- 无障碍性 (Accessibility): 确保您的自定义行为不会损害网站的无障碍性。Divi手风琴通常具有良好的键盘导航和屏幕阅读器支持。此脚本主要改变默认初始状态，通常不会影响后续的用户交互。
总结
通过上述JavaScript代码，您可以轻松地实现Divi手风琴模块的最后一个项目在页面加载时默认展开。这种自定义不仅能够满足特定的设计需求，还能有效引导用户关注关键信息，从而提升整体的用户体验。务必按照指导将代码正确放置，并注意相关的最佳实践和潜在问题。
