0

コードをより効率的にしようとしています。だから私はトグルを作成するために jQuery の同じ行を使用しようとしています。

私のページの1つのアイテムでこれが機能しています。

私が抱えている問題は、下にスライドする2番目のアイテムをクリックすると、最初の要素が下にスライドすることです。

jsFiddleを作成しました。私の問題をデモします。

私のjQueryは次のとおりです....

// Accordion Related....
    $('h3.accordion-header').click(function()
    {
        $('.accordion').children().eq(1).slideToggle(function ()
        {
            $('h3.accordion-header').toggleClass('active', $(this).is(':visible'));
        });

        return false; // Prevent Default Click..

    })

ページの最初ではなく、その特定のクラスのアコーディオンをどのようにターゲットにすればよいか疑問に思っています。可能であれば？

ありがとう

4

3 に答える 3

2

this参照を使用してclosest()..

// Accordion Related....
$('h3.accordion-header').click(function () {
   $(this).closest('.accordion').children().eq(1).slideToggle(function () {
 //^^^^^^^^^^^^^^^^-----here 
     $(this).toggleClass('active', $(this).is(':visible'));
   });


   return false; // Prevent Default Click..

})

ここでフィドル

または最も簡単なのは usign next().. (要素が常に要素の隣にあることが確実な場合h3)

 $('h3.accordion-header').click(function () {
   $(this).next().slideToggle(function () {
      $(this).toggleClass('active', $(this).is(':visible'));
   });
     return false; // Prevent Default Click..
  });

next() を使用してフィドル

于 2013-09-05T09:28:37.350 に答える
1

コードは、アコーディオン レベルでイベントをキャプチャできます。その後、他の選択範囲をより簡単に絞り込むことができます。

$(".accordion").on("click", ".accordion-header", function()
{
    var that = this;
    $(".row", $(this).parents(".accordion")).slideToggle(function ()
    {
        $(that).toggleClass('active',  $(this).is(':visible'));
    });

    return false; // Prevent Default Click..
});

JS フィドル: http://jsfiddle.net/Y3mKA/8/

于 2013-09-05T09:41:13.503 に答える