0

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

HTML 示例：

<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 代码：

<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. 获取所有先前手风琴项的父项。就像其中一个一样，只要它不是当前的手风琴项目，它就会添加/删除类。

我不确定这个脚本哪里出了问题，如果能帮助我指出正确的方向，或者指出脚本中的错误，我将不胜感激。

4

1 回答 1

0

这可能会有所帮助：

$('.et_pb_accordion_item').each(function(){
       $(this).addClass('et_pb_toggle_close').removeClass('et_pb_toggle_open')
})
于 2021-07-16T18:17:05.703 回答