同じページで開いている他のすべてのアコーディオン項目を閉じる方法を見つけようとしています。Wordpress サイトのテーマとして Divi を使用しています。Divi には、一度に 1 つのアコーディオン項目を開く機能が既に付属していますが、同じページに別のアコーディオンがある場合、そのページで最後に開いたアコーディオン項目は閉じません。これをオンラインで行う方法についての答えが見つからないようです.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>
コードのロジックは、アコーディオンのタイトルをクリックすると次のようになります。
- その後のすべてのアコーディオン項目の親を取得します。現在のアコーディオン アイテムでない限り、閉じるアコーディオン クラスが追加され、開いているアコーディオン クラスが削除されます。
- 以前のすべてのアコーディオン アイテムの親を取得します。また、現在のアコーディオン項目でない限り、クラスを追加/削除します。
このスクリプトのどこが間違っているのかわかりません。正しい方向に私を向けたり、スクリプト内/スクリプト内のエラーを指摘したりするのに役立ちます。