レスポンシブテーブルデザイン：JQueryを使用してclick（）を展開するtr

Question

私のウェブページ上のテーブルを反応的に動作させたい。この考え方は、ページ幅が特定のしきい値を下回ると自動的にアコーディオンとして表現されることです。私はthisページからアコーディオンのサンプルコードを引っ張った。

今私の問題は、テーブルの行全体がそれぞれの折りたたみ/展開を引き起こすボタンに変わってしまうことです。 <i>要素を<tr>要素の代わりにクリックイベントを受け取るようにするには、jsを再配線するにはどうすればよいですか？

理由は私がこの動作をしたい理由は非常に簡単です：これらの入力のいずれかがクリックされるとすぐにテーブルが折り返されるので、このテーブルはもう使用できないいくつかのinput要素を含んでいます。

これは私の試みです。ここで

trAcc.find('i').click(function() { 
    if (trAcc.hasClass('accordion-opened')) { 
     trAcc 
      .animate({ maxHeight: '50px' }, 200) 
      .removeClass('accordion-opened'); 

     $(this).text('+'); 

    } else { 
     trAcc 
      .animate({ maxHeight: '1000px' }, 400) 
      .addClass('accordion-opened'); 

     $(this).text('-'); 
    } 
});  

を元fiddle次のとおりです。しかし、それは倍/ユーザーがクリック一つだけの代わりに、すべての行を展開します。

Answer 1

私はjQueryを初めて使用しているので、私は現在APIについてよく知らないです。しかし、私はちょうどparentメソッドを見つけました。それを使用して問題は非常に簡単取得し、私の解決策はこれに沸く：

trAcc.find('i').click(function() { 
    if ($(this).parent('tr').hasClass('accordion-opened')) { 
     $(this).parent('tr') 
      .animate({ maxHeight: '50px' }, 200) 
      .removeClass('accordion-opened'); 

     $(this).text('+'); 

    } else { 
     $(this).parent('tr') 
      .animate({ maxHeight: '1000px' }, 400) 
      .addClass('accordion-opened'); 

     $(this).text('-'); 
    } 
});    

Answer 2

私は少しthisのようなあなたの元jsFiddleコードを変更しました。

trAcc.append('<i class="icon-accordion">+</i>'); 
    $('.icon-accordion').on('click', function (e) { 
     e.stopImmediatePropagation(); 
     if ($(this).parent().hasClass('accordion-opened')) { 
      $(this) 
       .parent() 
       .animate({maxHeight: '60px'}, 200) 
       .removeClass('accordion-opened') 
       .end() 
       .text('+'); 
     } else { 
      $(this) 
       .parent() 
       .animate({maxHeight: '1000px'}, 400) 
       .addClass('accordion-opened') 
       .end() 
       .text('-'); 
       } 
     });