首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >需要帮助关闭同一页上多个打开的手风琴项目,但各节分开

需要帮助关闭同一页上多个打开的手风琴项目,但各节分开
EN

Stack Overflow用户
提问于 2021-07-16 17:59:59
回答 1查看 127关注 0票数 0

我想弄清楚如何在同一页上关闭所有其他打开的手风琴项目。我使用Divi作为我的Wordpress网站的主题。Divi已经具备了一次打开一个手风琴项目的能力,但是如果同一页上有另一个手风琴,它就不会关闭该页面上最后一个打开的手风琴项目。我似乎找不到任何关于如何在网上解决这个问题的答案,所以使用JQuery是解决这个问题的最好方法。我对JQuery非常陌生,所以我不确定我是不是遗漏了什么,或者我的代码是否没有按预期工作。

HTML示例:

代码语言:javascript
代码运行次数:0
运行
复制
<div class="et_pb_module et_pb_accordion et_pb_accordion_2 ally-faq">
    <div class="et_pb_toggle et_pb_module et_pb_accordion_item et_pb_accordion_item_10 et_pb_toggle_close">
        <h5 class="et_pb_toggle_title">Your Title Goes Here</h5>
        <div class="et_pb_toggle_content clearfix"></div>
    </div>

    <div class="et_pb_toggle et_pb_module et_pb_accordion_item et_pb_accordion_item_11  et_pb_toggle_close">
        <h5 class="et_pb_toggle_title">What are your Screen Print Artwork Guidelines?</h5>
        <div class="et_pb_toggle_content clearfix"></div>
    </div>

    <div class="et_pb_toggle et_pb_module et_pb_accordion_item et_pb_accordion_item_12  et_pb_toggle_open">             
        <h5 class="et_pb_toggle_title">I don't have access to vector artwork, what do I do?</h5>
        <div class="et_pb_toggle_content clearfix"></div> 
    </div>
</div>

使用CSS类:

et_pb_toggle_close -手风琴项目目前已关闭

et_pb_toggle_open手风琴项目目前处于打开状态。

et_pb_toggle_title -手风琴项目标题

若要从“关闭”更改为“打开”,请单击et_pb_toggle_title类。

下面是我当前的JQuery代码:

代码语言:javascript
代码运行次数:0
运行
复制
<script>
jQuery(function($){
    $('.et_pb_toggle_title').click(function() {
      $this = $(this);
      $('et_pb_toggle_title').parent().nextAll().not($this).addClass('et_pb_toggle_close').removeClass('et_pb_toggle_open');
      $('et_pb_toggle_title').parent().prevAll().not($this.parent()).addClass('et_pb_toggle_close').removeClass('et_pb_toggle_open');
    });
});
</script>

代码的逻辑是点击手风琴的标题,它将:

  1. 在它之后得到所有手风琴项目的父级。只要它不是当前的手风琴项目,它就会添加关闭手风琴类并删除打开的类。
  2. 获取所有先前手风琴项目的父级。和其中的一个一样,只要它不是当前的手风琴项目,它就会添加/删除类。

我不知道这个脚本哪里出了问题

EN

回答 1

Stack Overflow用户

发布于 2021-07-16 18:17:05

这可能有助于:

代码语言:javascript
代码运行次数:0
运行
复制
$('.et_pb_accordion_item').each(function(){
       $(this).addClass('et_pb_toggle_close').removeClass('et_pb_toggle_open')
})
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/68413424

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档