web-dev-qa-db-ja.com

jQuery-テーブルに対するアコーディオン効果

JQueryを使用して3つの異なるテーブルにアコーディオン効果を実装するのが困難であり、いくつかの支援を利用できます。今のところうまくいきますヘッダー行をクリックすると、後続の行が表示されますが、何らかのアニメーションが必要です。また、最初のテーブルを完全に表示したいと思いますが、私は初心者であり、これは私の頭の上にあります。

これが私のHTMLです。

<table class="research">
                <tbody>
                    <tr class="accordion">
                        <td colspan="3">This is the header</td>
                    </tr>
                    <tr>
                        <td>Research</td>
                        <td>Description</td>
                        <td>Partner</td>
                    </tr>
                    <tr>
                        <td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</td>
                        <td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</td>
                        <td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</td>
                    </tr>
                </tbody>
            </table>

            <table class="research">
                <tbody>
                    <tr class="accordion">
                        <td colspan="3">This is the header</td>
                    </tr>
                    <tr>
                        <td>Research</td>
                        <td>Description</td>
                        <td>Partner</td>
                    </tr>
                    <tr>
                        <td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</td>
                        <td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</td>
                        <td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</td>
                    </tr>
                </tbody>
            </table>

            <table class="research">
                <tbody>
                    <tr class="accordion">
                        <td colspan="3">This is the header</td>
                    </tr>
                    <tr>
                        <td>Research</td>
                        <td>Description</td>
                        <td>Partner</td>
                    </tr>
                    <tr>
                        <td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</td>
                        <td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</td>
                        <td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</td>
                    </tr>
                </tbody>
            </table>

そして、これが私のjQueryです。

$(function() {
  $(".research tr:not(.accordion)").hide();
  $(".research tr:first-child").show();
  $(".research tr.accordion").click(function(){
  $(this).nextAll("tr").toggle();
    });
  });
jqueryjquery-ui-accordion
25
user965879
_$(function() {
  $(".research tr:not(.accordion)").hide();
  $(".research tr:first-child").show();

  $(".research tr.accordion").click(function(){
      $(this).nextAll("tr").fadeToggle(500);
  }).eq(0).trigger('click');
});
_

.fadeToggle(500);は、単に要素を表示/非表示するのではなく、要素の表示をアニメーション化します。

.eq(0).trigger('click');は、ページがロードされたときにコンテンツが表示されるように、最初のヘッダーをクリックします。

使用するクールな効果はslideUp()とslideDown()ですが、テーブル行では使用できないように見えます。

デモは次のとおりです。 http://jsfiddle.net/Xqk3m/

更新

_.research_セレクターをキャッシュして、コードを少し最適化することもできます。

_$(function() {
    var $research = $('.research');
    $research.find("tr").not('.accordion').hide();
    $research.find("tr").eq(0).show();

    $research.find(".accordion").click(function(){
        $(this).siblings().fadeToggle(500);
    }).eq(0).trigger('click');
});
_

この例では、関数を選択するためにすべての文字列セレクターも削除しました（たとえば、.not()の代わりに:not()を使用しました）。 DOMトラバーサルの関数は、セレクターを文字列に入れるよりも高速です。

デモは次のとおりです。 http://jsfiddle.net/Xqk3m/1/

更新

最後に大事なことを言い忘れましたが、あるセクションを開いたときに残りのセクションを閉じるアコーディオンにしたい場合、次の解決策があります。

_$(function() {
    var $research = $('.research');
    $research.find("tr").not('.accordion').hide();
    $research.find("tr").eq(0).show();

    $research.find(".accordion").click(function(){
        $research.find('.accordion').not(this).siblings().fadeOut(500);
        $(this).siblings().fadeToggle(500);
    }).eq(0).trigger('click');
});
_

$research.find('.accordion').not(this).siblings().fadeOut(500);は重要な部分です。クリックされたものを除くすべての_.accordion_要素を選択し、選択されたすべての_.accordion_要素の兄弟を見つけて非表示にします。

デモは次のとおりです。 http://jsfiddle.net/Xqk3m/2/

36
Jasper

フェード効果を追加しました。それを確認してください- http://jsfiddle.net/XE6AG/1/

    $(function() {
      $(".research tr:not(.accordion)").hide();
      $(".research tr:first-child").show();
      $(".research tr.accordion").click(function(){
      $(this).nextAll("tr").fadeToggle();
       });
    });

これは高速です- http://jsfiddle.net/XE6AG/2/

    //this is fast
    $(function() {
      $(".research tr:not(.accordion)").hide();
      $(".research tr:first-child").show();
      $(".research tr.accordion").click(function(){
      $(this).nextAll("tr").fadeToggle("fast");
       });
    });

これは本当に遅いです。 http://jsfiddle.net/XE6AG/3/

    //this is fast
    $(function() {
      $(".research tr:not(.accordion)").hide();
      $(".research tr:first-child").show();
      $(".research tr.accordion").click(function(){
      $(this).nextAll("tr").fadeToggle("fast");
       });
    });

たとえば、イージングを追加することもできます- http://jsfiddle.net/XE6AG/4/ 。

2
theliberalsurfer