DIVI手风琴模块：实现默认展开最后一个项目的教程-java教程-PHP中文网

DIVI手风琴模块：实现默认展开最后一个项目的教程

霞舞

发布： 2025-11-21 21:00:07

原创

789人浏览过

DIVI手风琴模块：实现默认展开最后一个项目的教程

本教程详细指导如何在divi主题中，通过自定义jquery脚本，使手风琴（accordion）模块默认展开其最后一个项目。文章将解释divi手风琴的工作原理，提供完整的代码示例，并说明如何在网站中正确集成和应用此脚本，以实现动态且用户友好的内容展示效果。

引言

DIVI主题的手风琴模块是组织和展示大量内容的有效工具，它允许用户点击标题来展开或折叠相关内容。默认情况下，DIVI手风琴通常是全部折叠的。然而，在某些设计场景中，我们可能希望手风琴的最后一个项目在页面加载时就默认处于展开状态，以突出显示最新或最重要的信息。本教程将提供一个简洁而有效的jQuery解决方案，帮助您实现这一功能。

理解DIVI手风琴的工作机制

DIVI手风琴模块的展开和折叠状态主要通过其内部元素的CSS类来控制。当一个手风琴项目展开时，其容器通常会带有 et_pb_toggle_open 类，并且内容区域（通常是 et_pb_toggle_content）的 display 属性会被设置为 block。相反，当项目折叠时，容器会带有 et_pb_toggle_close 类，内容区域的 display 属性会被设置为 none。通过JavaScript（特别是jQuery），我们可以动态地操作这些类和样式，从而控制手风琴的默认状态。

核心实现思路

要实现手风琴模块默认展开最后一个项目，我们需要遵循以下逻辑步骤：

识别目标模块： 首先，我们需要准确地定位到我们希望操作的DIVI手风琴模块。为了确保代码的针对性，建议为目标手风琴模块添加一个自定义CSS类。
初始化所有手风琴： 在操作最后一个项目之前，我们需要确保所有手风琴都处于折叠状态。这有助于避免与DIVI自带脚本的冲突，并确保我们能够从一个干净的状态开始。
定位并展开最后一个项目： 找到手风琴模块中的最后一个项目，并修改其CSS类和内容区域的 display 属性，使其展开。

实现步骤与代码示例

1. 准备工作：为DIVI手风琴模块添加自定义CSS类

在DIVI构建器中编辑您的手风琴模块。在模块设置的“高级”选项卡中，找到“CSS ID & 类”部分。在“CSS 类”字段中，添加一个自定义类，例如 my-custom-accordion。这个类将用于我们的jQuery代码中，以便精确地选择目标手风琴模块。

2. JavaScript/jQuery代码

将以下代码添加到您的网站。您可以将其放置在：

DIVI主题选项 -youjiankuohaophpcn 集成 -> 在之前添加代码 区域。
页面/文章设置 -> 高级 -> 自定义CSS 区域（如果仅针对特定页面）。
使用代码模块（如果仅针对特定页面或区域）。
通过子主题的 functions.php 文件或外部JS文件加载。

jQuery(document).ready(function($) {
    // 使用setTimeout确保DIVI自身的手风琴初始化脚本已运行
    // 延迟时间可根据您的网站加载速度进行调整，500毫秒通常足够
    setTimeout(function() {
        // 目标手风琴模块的选择器，请替换 'my-custom-accordion' 为您实际设置的类名
        var $accordionModule = $('.my-custom-accordion');

        // 查找模块内的所有手风琴项（toggle）
        var $toggles = $accordionModule.find('.et_pb_toggle');

        // 1. 关闭所有手风琴项
        $toggles.each(function() {
            var $thisToggle = $(this);
            // 检查是否已打开，如果是，则关闭
            if ($thisToggle.hasClass('et_pb_toggle_open')) {
                $thisToggle.removeClass('et_pb_toggle_open').addClass('et_pb_toggle_close');
                // 立即隐藏内容，避免闪烁
                $thisToggle.find('.et_pb_toggle_content').css('display', 'none');
            }
        });

        // 2. 找到最后一个手风琴项并打开它
        var $lastToggle = $toggles.last(); // 获取所有手风琴项中的最后一个
        if ($lastToggle.length) { // 确保找到了最后一个项
            $lastToggle.removeClass('et_pb_toggle_close').addClass('et_pb_toggle_open');
            // 立即显示内容
            $lastToggle.find('.et_pb_toggle_content').css('display', 'block');
        }
    }, 500); // 延迟500毫秒执行
});

登录后复制

代码解析

jQuery(document).ready(function($) { ... });：这是一个标准的jQuery语法，确保在DOM（文档对象模型）完全加载并准备好后执行内部代码。
setTimeout(function() { ... }, 500);：DIVI手风琴的默认行为是由其自身的JavaScript控制的。为了避免我们的脚本在DIVI脚本之前执行导致冲突，我们使用 setTimeout 引入一个短暂的延迟（例如500毫秒）。这确保了DIVI的初始化脚本有足够的时间运行完毕。
var $accordionModule = $('.my-custom-accordion');：通过我们之前在DIVI模块中设置的自定义CSS类 my-custom-accordion 来选取目标手风琴模块。请务必将此选择器替换为您实际使用的类名。
var $toggles = $accordionModule.find('.et_pb_toggle');：在选定的手风琴模块内部，查找所有带有 et_pb_toggle 类的元素。这些元素代表了手风琴的每个可点击的项目。
$toggles.each(function() { ... });：遍历所有找到的手风琴项目。
- $thisToggle.removeClass('et_pb_toggle_open').addClass('et_pb_toggle_close');：移除打开状态的类，添加关闭状态的类。
- $thisToggle.find('.et_pb_toggle_content').css('display', 'none');：隐藏手风琴的内容区域。
var $lastToggle = $toggles.last();：使用jQuery的 .last() 方法，从所有手风琴项目中选取最后一个。
if ($lastToggle.length) { ... }：检查是否成功获取到了最后一个手风琴项目，防止在没有找到时出现错误。
$lastToggle.removeClass('et_pb_toggle_close').addClass('et_pb_toggle_open');：移除关闭状态的类，添加打开状态的类。
$lastToggle.find('.et_pb_toggle_content').css('display', 'block');：显示最后一个手风琴项目的内容区域。

注意事项

选择器准确性： 确保您在代码中使用的CSS类选择器 (.my-custom-accordion) 与您在DIVI模块设置中添加的类名完全一致。
延迟时间： setTimeout 中的延迟时间（500毫秒）是一个经验值。如果您的网站加载速度较慢，或者手风琴在页面上出现较晚，您可能需要适当增加这个延迟时间，以确保脚本在DIVI的初始化之后运行。
与其他脚本的兼容性： 确保此脚本不会与您网站上其他可能操作DIVI手风琴的自定义脚本或插件产生冲突。
DIVI更新： DIVI主题的未来更新可能会改变手风琴模块的内部HTML结构或CSS类名。如果发生这种情况，您可能需要相应地调整此代码。
测试： 在将代码部署到生产环境之前，务必在开发或测试环境中进行充分测试，以确保其按预期工作，并且没有引入任何副作用。