0

現在、コンテンツ クエリ Web パーツのアコーディオン機能を実装しようとしています。

基本的に、コンテンツ クエリの構造は次のようになります。 

<li class="dwft-item">
<div class="link-item"> Title </div>
<div class="description"> Content I want to expand collapse </div>
</li>



<li class="dwft-item">
<div class="link-item"> Title </div>
<div class="description"> Content I want to expand collapse </div>
</li>




<li class="dwft-item">
<div class="link-item"> Title </div>
<div class="description"> Content I want to expand collapse </div>
</li>

そして私はそれらの3-5を持っています。

私が今やりたいことは、対応するリンク項目 (タイトル) div をクリックするたびに説明 div を折りたたむことです。

これが私のJSコードです：

$(document).ready(function () {
    //ACCORDION BUTTON ACTION
    $('#MSOZoneCell_WebPartWPQ3 .link-item').click(function () {
        //MAKE THE ACCORDION CLOSE ON THE SECOND CLICK
        if ($('#MSOZoneCell_WebPartWPQ3 .description').hasClass('openDiv')) {
            $('#MSOZoneCell_WebPartWPQ3 .description').toggle('normal');
            $(this).next().removeClass('openDiv');
        } else {
            $('#MSOZoneCell_WebPartWPQ3 .description').toggle('normal');
            $(this).next().toggle('normal');
            $(this).next().addClass('openDiv');
        }
    });
    //HIDE THE DIVS ON PAGE LOAD
    $("#MSOZoneCell_WebPartWPQ3 .description").hide();
});

私が今抱えている問題は、タイトルのいずれかをクリックすると、すべての説明 div が展開されることです。

ここで何か助けていただければ幸いです。ありがとう！！

4

1 に答える 1