本教程详细讲解如何在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中编辑您希望实现此功能的手风琴模块：
Anyword
AI文案写作助手和文本生成器，具有可预测结果的文案 AI
153 查看详情 
点击手风琴模块的齿轮图标进入设置。切换到高级选项卡。在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主题选项 -youjiankuohaophpcn 集成:
登录WordPress后台，导航到 Divi -> 主题选项。点击 集成 选项卡。将代码粘贴到 在 中添加代码 区域。点击 保存更改。
使用Divi代码模块 (仅适用于特定页面):
在您使用手风琴模块的页面上，通过Divi Builder添加一个 代码模块。将JavaScript代码（包括 标签）粘贴到代码模块中。这种方法适用于仅在特定页面实现此功能。
子主题的 functions.php (推荐):
如果您正在使用Divi子主题，这是最专业和推荐的方式。编辑子主题的 functions.php 文件。将以下代码添加到 functions.php 文件中：
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动画产生冲突，需要谨慎测试。
总结
通过上述JavaScript代码和集成方法，您可以轻松地实现Divi手风琴模块默认展开最后一个项目的功能。这不仅提升了网站内容的展示灵活性，也为用户提供了更加定制化的浏览体验。请务必遵循教程中的步骤，并根据您的具体需求进行调整和测试。
以上就是Divi手风琴模块：实现默认展开最后一个项目的详细内容，更多请关注php中文网其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/865973.html
微信扫一扫 
支付宝扫一扫 
