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

DDD

发布时间：2025-11-21 20:31:02

871人浏览过

来源于php中文网

原创

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

本教程旨在详细指导如何在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主题选项 -> 集成 -> 在<head>中添加代码 (或 <body> 结束前)：

阿里云AI平台
阿里云AI平台

下载
- 推荐位置: 通常，将此代码放置在“将代码添加到您的<body>的末尾”区域更合适。这样可以确保在所有HTML元素都加载完毕后再执行脚本，避免潜在的错误。
- 操作步骤: 登录WordPress后台 -> 导航到 Divi -> 主题选项 -> 点击集成选项卡。在“将代码添加到您的<body>的末尾 (适用于跟踪代码等)”文本区域中粘贴上述JavaScript代码。

使用子主题的 functions.php 文件:

如果您正在使用Divi子主题，可以将JavaScript代码添加到子主题的functions.php文件中，通过WordPress的wp_enqueue_script钩子来加载。这种方式更专业，也更容易管理。

示例 (添加到子主题的 functions.php):

<?php
function custom_divi_accordion_scripts() {
    wp_add_inline_script( 'jquery-core', '
        jQuery(document).ready(function($) {
            // 您的JavaScript代码
            $(".et_pb_accordion").each(function() {
                var $accordion = $(this);
                var $toggles = $accordion.find(".et_pb_toggle");

                $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();
            });
        });
    ', 'after' );
}
add_action( 'wp_enqueue_scripts', 'custom_divi_accordion_scripts' );
?>

请确保在添加代码时，用实际的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手风琴通常具有良好的键盘导航和屏幕阅读器支持。此脚本主要改变默认初始状态，通常不会影响后续的用户交互。