テーブル行（tr）を展開したり折りたたんだり（トグル）するにはどうすればよいですか？

Question

私の既存の知識（例えばthis one）で、私は今までdivコンテナを簡単に切り替える（隠す、表示する）ことができることを見てきました。しかし、私はかなり私はtrの中にいくつかのデータを持っていると混乱していると私は表示し、一度その項目を非表示にしたいtrをクリックします。食べ物メニュー（私はそれを "ライス"と呼んでいます）を考えてみましょう。そのカテゴリにはいくつかのサブメニューがあります（私はそれらを "フライドライス"、 "ボイルドライス"と名付けます）。 「ライス」をクリックすると（または、矢印またはプラスアイコンをクリックしている場合）、サブメニューが表示されます。同様に、矢印が再びクリックされると、それらは自分自身を隠すべきです。 このwebsiteで矢印キーでレストランメニューを切り替える方法をご覧ください。私はまったく同じことをしたい。

私が働いているコード：

<div class="media-right"> 
     <table class="table"> 
      <tr> 
       <td> 
        <a href="#"><h3 class="menu-title">Rice</h3></a> 
</td> <!--make this tr expandable and collapsable--> 
       <td> 
        <div class="menu-rate">&#36;100.00</div> 
       </td> 
      </tr> 

      <tr> 
       <td> 
        <a href="#"><h3 class="menu-title">Fried Rice</h3></a></td> 
       <td> 
        <div class="menu-rate">&#36;50.00</div> 
       </td> 
      </tr> 
      <tr> 
       <td> 
        <a href="#"><h3 class="menu-title">Boiled Rice</h3></a></td> 
       <td> 
        <div class="menu-rate">&#36;25.00</div> 
       </td> 
      </tr> 
     </table> 
    </div> 

Answer 1

は、あなたが同様の機能を持つクラス「アコーディオン」を試すことができます。

You can find it here in detail.

Answer 2

<script> 
    $(function(){ 
     $('.menu-rate').click(function(){ 
     $(this).closest('.container').toggleClass('collapsed'); 
     }); 

    }); 
</script> 

Answer 3

このようなものはありますか？

function Rice(){ 
 
if(document.getElementById("Rice").style.display == "none"){ 
 
document.getElementById("Rice").style.display = "block"; 
 
}else{ 
 
document.getElementById("Rice").style.display = "none"; 
 
} 
 
} 
 

 
function boiledRice(){ 
 
if(document.getElementById("boiledRice").style.display == "none"){ 
 
document.getElementById("boiledRice").style.display = "block"; 
 
}else{ 
 
document.getElementById("boiledRice").style.display = "none"; 
 
} 
 
} 
 

 
function friedRice(){ 
 
if(document.getElementById("friedRice").style.display == "none"){ 
 
document.getElementById("friedRice").style.display = "block"; 
 
}else{ 
 
document.getElementById("friedRice").style.display = "none"; 
 
} 
 
}

<div class="media-right"> 
 
         <table class="table"> 
 
          <tr> 
 
           <td> 
 
            <a onclick="Rice()"><h3 class="menu-title">Rice</h3></a><div id="Rice" style="display:none;"><ul><li>1</li><li>2</li><li>3</li></ul></div></td> <!--make this tr expandable and collapsable--> 
 
           <td> 
 
            <div class="menu-rate">&#36;100.00</div> 
 
           </td> 
 
          </tr> 
 

 
          <tr> 
 
           <td> 
 
            <a onclick="friedRice()"><h3 class="menu-title">Fried Rice</h3></a><div id="friedRice" style="display:none;"><ul><li>1</li><li>2</li><li>3</li></ul></div></td> 
 
           <td> 
 
            <div class="menu-rate">&#36;50.00</div> 
 
           </td> 
 
          </tr> 
 
          <tr> 
 
           <td> 
 
            <a onclick="boiledRice()"><h3 class="menu-title">Boiled Rice</h3></a><div id="boiledRice" style="display:none;"><ul><li>1</li><li>2</li><li>3</li></ul></div></td> 
 
           <td> 
 
            <div class="menu-rate">&#36;25.00</div> 
 
           </td> 
 
          </tr> 
 
         </table> 
 

 
        </div>

Answer 4

テーブルを利用するためにあなたを強制される制約はありますか？すでにjQueryを使用しているので、jQuery UIのアコーディオンウィジェットを使用すると、このタイプの機能を簡単に実現できます。

$("#accordion").accordion({ 
    collapsible: true 
}); 

ここにはbasic exampleがあります。

Answer 5

ライブラリを開いている場合は、wenzhichinによるブートストラップテーブルを使用してみてください。私はそれが非常に柔軟であると感じます。

サブテーブル - 行折りたたみhttp://issues.wenzhixin.net.cn/bootstrap-table/#options/sub-table.html

- グーグル製の材料設計上のhttp://issues.wenzhixin.net.cn/bootstrap-table/#methods/expandRow-collapseRow.html

Answer 6

チェックアウト折りたたみ可能な要素、使用して本当に便利に簡単に：

http://materializecss.com/collapsible.html