1

次のjqueryコードに小さな修正が必要です。(デモはこちら)

デモで気が付くと、見出し 1 は思い通りに完全に上下にスライドしていますが、見出し 2 と 3 はそうではありません。違いは、( "Heading Two" 、 "Heading Three" ) タグの周りに別の div を追加したことだけです。この行 $(this). next("p").slideToggle("fast"); で何かを行う必要があることはわかっています。しかし、私はJqueryの初心者であるため、その方法がわかりません。

以下は私のコードです

$(document).ready(function(){
    $("p").hide();

    $("h3").click(function(){
        $(this).next("p").slideToggle("fast")
        $(this).toggleClass("active");
    });
    $('.mylink').click(function(){
        $(this).parent('p').prev().trigger('click');
    })
});

ガイドしてください

4

3 に答える 3

3

完全ではありませんが、これにより必要な機能が得られます。 

$(document).ready(function(){
    $("p").hide();

    $("h3").click(function(){
        $(this).closest('.accordion').find("p").slideToggle("fast");
        $(this).toggleClass("active");
    });
    $('.mylink').click(function(){
        $(this)
          .parent()
          .slideToggle('fast')
          .closest('.accordion')
          .find('h3')
          .toggleClass('active');
    })
});

主な変更点は、を使用しclosest()て親を見つけ、それを要素 .accordionへの参照点として使用することです。find()p

編集: codepen が何らかの理由で中断されました。ここにjsfiddleがあります

于 2013-04-10T18:20:13.650 に答える
0

コードの問題は、2 つと 3 つの見出しで親 div を使用していることです。これはたとえば次のように機能します。

<h3 class="some_class">Heading One</h3>

しかし、あなたのコードではこれではありません

 <div class="some_class"><h3>Heading One</h3></div>

jsfiddle

于 2013-04-10T18:03:31.077 に答える