Divi手风琴模块默认展开最后项设置

时间：2026-03-14

Divi手风琴模块：实现默认展开最后一个项目

本教程详细讲解如何在Divi主题中，通过JavaScript代码实现手风琴（Accordion）模块默认展开其最后一个项目。文章将提供清晰的代码示例，并指导如何将其集成到Divi网站，确保手风琴在页面加载时，仅最后一个项目处于打开状态，提升用户体验和内容展示的灵活性。

Divi主题的手风琴模块是一个非常实用的内容展示工具，但其默认行为通常是所有项目都处于关闭状态，或者第一个项目默认展开。在某些设计场景下，我们可能希望页面加载时，手风琴的最后一个项目能够默认展开，以突出特定信息或引导用户关注结尾内容。本教程将指导您如何通过自定义JavaScript代码实现这一功能。

理解Divi手风琴的结构

在深入代码之前，了解Divi手风琴模块的HTML结构和相关CSS类是至关重要的。一个典型的Divi手风琴模块通常包含以下关键元素：

模块容器: 整个手风琴模块的外部容器，通常具有 et_pb_accordion 类。
手风琴项 (Toggle): 每一个可展开/折叠的项目，通常具有 et_pb_toggle 类。
展开/折叠状态: Divi通过添加或移除 et_pb_toggle_open (展开) 和 et_pb_toggle_close (折叠) 类来控制手风琴项的状态。
标题: 手风琴项的标题部分，通常是 et_pb_toggle_title。
内容: 手风琴项的实际内容，通常是 et_pb_toggle_content，其 display 属性会根据展开/折叠状态进行切换。

我们的目标就是通过JavaScript，在页面加载完成后，精确控制这些类和样式，从而实现最后一个项目的默认展开。

实现思路

由于Divi手风琴的默认行为是由其内置的JavaScript控制的，单纯的CSS :last-child 规则无法直接实现“默认展开”的效果，因为Divi的JS会在页面加载后重新应用其逻辑。因此，我们需要使用JavaScript来干预这一过程。

核心思路如下：

等待DOM加载完成: 确保在Divi手风琴模块及其内容完全加载到DOM之后再执行脚本。
定位目标手风琴模块: 为了避免影响页面上所有手风琴模块，我们将为目标模块添加一个自定义CSS类，并通过这个类来精确选择。
关闭所有手风琴项: 首先遍历目标模块中的所有手风琴项，确保它们都处于关闭状态。这通过移除 et_pb_toggle_open 类并添加 et_pb_toggle_close 类，同时将内容区域的 display 属性设置为 none 来实现。
打开最后一个手风琴项: 找到目标模块中的最后一个手风琴项，然后移除 et_pb_toggle_close 类并添加 et_pb_toggle_open 类，同时将内容区域的 display 属性设置为 block。

JavaScript解决方案

为了实现上述思路，我们将编写一段jQuery代码。

步骤一：为手风琴模块添加自定义CSS类

首先，在Divi Builder中编辑您希望实现此功能的手风琴模块：

点击手风琴模块的齿轮图标进入设置。
切换到高级选项卡。
在CSS ID & 类部分，找到CSS类字段。
输入一个唯一的类名，例如 my-last-open-accordion。

这将允许我们的JavaScript代码精确地定位到这个特定的手风琴模块。

步骤二：编写JavaScript代码

将以下JavaScript代码添加到您的网站。

jQuery(document).ready(function($) {
    // 目标手风琴模块的自定义CSS类。
    // 请确保与您在Divi Builder中设置的类名一致。
    var $targetAccordion = $('.my-last-open-accordion');

    // 检查目标手风琴模块是否存在于页面上
    if ($targetAccordion.length) {
        // 获取该模块内的所有手风琴项
        var $toggles = $targetAccordion.find('.et_pb_toggle');

        // 确保手风琴项存在
        if ($toggles.length > 0) {
            // 1. 遍历所有手风琴项，确保它们都处于关闭状态
            $toggles.each(function() {
                var $toggle = $(this);
                // 如果当前项是打开的，则将其关闭
                if ($toggle.hasClass('et_pb_toggle_open')) {
                    $toggle.removeClass('et_pb_toggle_open').addClass('et_pb_toggle_close');
                    // 直接设置内容区域的display属性为none
                    $toggle.find('.et_pb_toggle_content').css('display', 'none');
                }
            });

            // 2. 找到最后一个手风琴项并将其打开
            var $lastToggle = $toggles.last();
            // 如果最后一个项是关闭的，则将其打开
            if ($lastToggle.hasClass('et_pb_toggle_close')) {
                $lastToggle.removeClass('et_pb_toggle_close').addClass('et_pb_toggle_open');
                // 直接设置内容区域的display属性为block
                $lastToggle.find('.et_pb_toggle_content').css('display', 'block');
            }
        }
    }
});

代码解释：

jQuery(document).ready(function($) { ... });: 这是一个标准的jQuery函数，确保在DOM完全加载并准备好之后才执行内部代码，避免因元素未加载而导致的错误。
var $targetAccordion = $('.my-last-open-accordion');: 这一行通过我们之前在Divi Builder中添加的自定义CSS类来选择目标手风琴模块。
if ($targetAccordion.length) { ... }: 检查是否成功找到了目标模块，以避免在模块不存在时执行不必要的代码。
var $toggles = $targetAccordion.find('.et_pb_toggle');: 在目标模块内部查找所有具有 et_pb_toggle 类的元素，这些就是单个的手风琴项。
$toggles.each(function() { ... });: 遍历所有找到的手风琴项。
- if ($toggle.hasClass('et_pb_toggle_open')) { ... }: 检查当前手风琴项是否已经处于打开状态。
- $toggle.removeClass('et_pb_toggle_open').addClass('et_pb_toggle_close');: 移除打开状态的类，添加关闭状态的类。
- $toggle.find('.et_pb_toggle_content').css('display', 'none');: 将手风琴项的内容区域隐藏。
var $lastToggle = $toggles.last();: 选取 et_pb_toggle 集合中的最后一个元素。
if ($lastToggle.hasClass('et_pb_toggle_close')) { ... }: 检查最后一个手风琴项是否处于关闭状态。
$lastToggle.removeClass('et_pb_toggle_close').addClass('et_pb_toggle_open');: 移除关闭状态的类，添加打开状态的类。
$lastToggle.find('.et_pb_toggle_content').css('display', 'block');: 将最后一个手风琴项的内容区域显示出来。

代码集成方式

您可以选择以下任意一种方式将上述JavaScript代码添加到您的Divi网站：

Divi主题选项 -> 集成:
- 登录WordPress后台，导航到 Divi -> 主题选项。
- 点击集成选项卡。
- 将代码粘贴到 在 <head> 中添加代码 区域。
- 点击 保存更改。
使用Divi代码模块 (仅适用于特定页面):
- 在您使用手风琴模块的页面上，通过Divi Builder添加一个 代码模块。
- 将JavaScript代码（包括 <script> 标签）粘贴到代码模块中。
- 这种方法适用于仅在特定页面实现此功能。

子主题的 functions.php (推荐):

如果您正在使用Divi子主题，这是最专业和推荐的方式。
编辑子主题的 functions.php 文件。
将以下代码添加到 functions.php 文件中：

<?php
function custom_divi_accordion_last_open_script() {
    // 确保只在前端页面加载此脚本
    if ( ! is_admin() ) {
        wp_add_inline_script( 'divi-custom-script', '
            jQuery(document).ready(function($) {
                var $targetAccordion = $(".my-last-open-accordion");

                if ($targetAccordion.length) {
                    var $toggles = $targetAccordion.find(".et_pb_toggle");

                    if ($toggles.length > 0) {
                        $toggles.each(function() {
                            var $toggle = $(this);
                            if ($toggle.hasClass("et_pb_toggle_open")) {
                                $toggle.removeClass("et_pb_toggle_open").addClass("et_pb_toggle_close");
                                $toggle.find(".et_pb_toggle_content").css("display", "none");
                            }
                        });

                        var $lastToggle = $toggles.last();
                        if ($lastToggle.hasClass("et_pb_toggle_close")) {
                            $lastToggle.removeClass("et_pb_toggle_close").addClass("et_pb_toggle_open");
                            $lastToggle.find(".et_pb_toggle_content").css("display", "block");
                        }
                    }
                }
            });
        ', 'after' );
    }
}
add_action( 'wp_enqueue_scripts', 'custom_divi_accordion_last_open_script' );

注意: divi-custom-script 是一个示例的脚本句柄，您可以根据需要调整。wp_add_inline_script 会将您的JavaScript代码作为内联脚本添加到页面。

注意事项

jQuery依赖: Divi主题默认加载jQuery，所以您可以直接使用 jQuery 或其别名 $ (在 ready 函数内部)。
选择器精确性: 务必使用自定义CSS类来定位特定的手风琴模块，避免影响到页面上其他手风琴模块的默认行为。
缓存问题: 在添加或修改代码后，请务必清除您的网站缓存（包括主题缓存、插件缓存和浏览器缓存），以确保更改生效。
Divi版本更新: Divi主题的更新可能会改变其内部HTML结构或JavaScript行为。如果未来代码失效，请检查Divi的更新日志并相应调整代码。
动画效果: 本教程中的代码直接设置 display 属性，没有包含展开/折叠的动画效果。Divi默认的动画是通过jQuery的 slideUp() / slideDown() 实现的。如果您需要动画，可以将 css('display', 'none') 替换为 slideUp()，将 css('display', 'block') 替换为 slideDown()。但请注意，这可能会与Divi自身的JS动画产生冲突，需要谨慎测试。