テーブル行を展開して折り畳む必要があります

私はこのサイトの回答から次のコードを取得しました。次のJQueryコードでは、テーブルの行がデフォルトで折りたたまれていて、 '見出しのID'をクリックするとテーブルが展開されます。ただし、見出しIDを再度クリックすると、行は折りたたまれません。私はそれをするためにこのコードに何かを加える必要があります。可能であれば、見出しID自体の代わりにユーザーがクリックできる+と - アイコンを追加することもできます。誰も助けることができますか？テーブル行を展開して折り畳む必要があります

<!DOCTYPE html> 

    <head> 
     <title>Master Vocab List</title> 

      <script type="text/javascript" src="jquery.js"> 
      </script> 
      <script type="text/javascript"> 
       $(document).ready(function(){ 
        $("#collapse").hide(); 
        $("#collapse1").hide(); 
        $("#collapse2").hide(); 
        $("#collapse3").hide(); 
        $("#collapse4").hide(); 
        $("#collapse5").hide(); 
        $("#collapse6").hide(); 
        $("#collapse7").hide(); 
        $("#collapse8").hide(); 

       }); 


       $("#heading").click(function(){     
        $("#collapse").show(); 
        $("#collapse1").show(); 
        $("#collapse2").show(); 
        $("#collapse3").show(); 
        $("#collapse4").show(); 
        $("#collapse5").show(); 
        $("#collapse6").show(); 
        $("#collapse7").show(); 
        $("#collapse8").show(); 



       }); 
      </script>

<table> 
     <tr> 
      <td id="heading" colspan = "2"><b>Connectors and 
      Transitions</b></td> 
     </tr> 
     <tr id="collapse"> 
      <td>primero</td> 
      <td>first</td> 
     </tr> 
     <tr id="collapse1"> 
      <td>después</td> 
      <td>afterwards</td> 
     </tr> 
     <tr id="collapse2"> 
      <td>pero</td> 
      <td>but</td> 
     </tr> 
     <tr id="collapse3"> 
      <td>y</td> 
      <td>and</td> 
     </tr> 
     <tr id="collapse4"> 
      <td>luego</td> 
      <td>afterwards</td> 
     </tr> 
     <tr id="collapse5"> 
      <td>antes</td> 
      <td>beforehand</td> 
     </tr> 
     <tr id="collapse6"> 
      <td>finalmente</td> 
      <td>finally</td> 
     </tr> 
     <tr id="collapse7"> 
      <td>por ejemplo</td> 
      <td>for example</td> 
     </tr> 
     <tr id="collapse8"> 
      <td>mientras</td> 
      <td>while</td> 
     </tr> 
    </table>`

出典

2017-12-21 Skins fan

あなただけ追加し、画像やフォント素晴らしいアイコンと+を達成するために、この新しい要素に見出しからIDプロパティを移動することができます。次に、.showを呼び出す代わりに、コードに.toggleを実行してください。 –

ありがとうございます。よく働く！ –

あなたが目標である究極のものを言うことはありませんので、私は2つの列、最初の行を持つテーブルであるあなたが持っている例を（使用してあなたの質問にお答えします見出しとしてスタイリングされています）。

各行にIDを追加するのは面倒です。 DOMトラバーサルを使用して、あなたの欲求に拍車をかけます。

jQueryの

$(document).ready(function() { 
    //find all rows after the first row and hide them 
    $('table').find('tr:gt(0)').hide(); 
    //add a class to track expanded/collapsed (for CSS styling) 
    $('#heading').addClass('hCollapsed'); 


    $("#heading").click(function() { 
    //#heading is a cell, so go up to the parent, which is the first tr. Toggle the hide/show status of those rows. 
    $(this).parent().siblings().toggle(); 
    //then adjust the classes accordingly (for CSS styling) 
    if ($(this).hasClass('hCollapsed')) { 
     $(this).removeClass('hCollapsed').addClass('hExpanded'); 
    } else { 
     $(this).removeClass('hExpanded').addClass('hCollapsed'); 
    } 

    }); 
});

をそして、シンプルなソリューションとして、あなたは+または追加するためにCSSを使用することができます - ：だから、あなたのケースでは、あなたが行うことができます。

CSS

.hCollapsed::before { 
    content: "+ "; 
} 

.hExpanded::before { 
    content: "- "; 
} 

#heading { 
    cursor: pointer; 
}

フィドルデモ：https://jsfiddle.net/zephyr_hex/cwtd2g18/

出典

2017-12-21 23:11:28

これは素晴らしいことです！どうもありがとうございます！私は基本的に、さまざまな見出しの下にグループ化された語彙の長いリストを持っていますので、この見出しを複数の見出しに適用し、それらをすべてクリーンなプレゼンテーションのために折りたたむようにします。再度、感謝します。 –

テーブル行を展開して折り畳む必要があります

答えて

関連する問題