materialize: make table row Akkordeon-Header

Question

Ich versuche, materialize zu verwenden, um eine Tabelle zu erstellen, die es ermöglicht, dass jede Tabellenzeile anklickbar ist. Durch Klicken auf eine Zeile sollte ein Akkordeon unter der Zeile mit mehr Daten für die Zeile erweitert werden. Ich kann nicht das Akkordeon öffnen oder das Ganze als Kopf für das Akkordeon sehen. Ich habe versucht, die Klassen direkt zu den trs hinzuzufügen, sowie jeden tr in ein div zu wickeln. keine Lösung gab das richtige Verhalten. Hier ist der Code, den ich derzeit haben:

<script src="https://code.jquery.com/jquery-3.0.0.min.js" integrity="sha256-JmvOoLtYsmqlsWxa7mDSLMwa6dZ9rrIdtrrVYRnDRH0=" crossorigin="anonymous"></script> 

    <!-- Compiled and minified CSS --> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css"> 

    <!-- Compiled and minified JavaScript --> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script> 

    <script type="text/javascript"> 
    $('.collapsible').collapsible({ 
     accordion: false // A setting that changes the collapsible behavior to expandable instead of the default accordion style 
    }); 
    </script> 
<table class="bordered"> 
    <thead> 
    <tr> 
     <th data-field="id">Name</th> 
     <th data-field="name">Item Name</th> 
     <th data-field="price">Item Price</th> 
    </tr> 
    </thead> 

    <tbody> 
    <tr class="collapsible" data-collapsible="accordion"> 
     <td class="collapsible-header">Alvin</td> 
     <div class="collapsible-body"> 
      <p> 
      hello 
      </p> 
     </div> 
     <td>Eclair</td> 
     <td>$0.87</td> 
    </tr> 
    <tr> 
     <td>Alan</td> 
     <td>Jellybean</td> 
     <td>$3.76</td> 
    </tr> 
    <tr> 
     <td>Jonathan</td> 
     <td>Lollipop</td> 
     <td>$7.00</td> 
    </tr> 
    </tbody> 
</table> 

Answer 1

Die Materialize Collapsible Bedürfnisse auf einem li Element konfiguriert werden.

Try this:

<table class="bordered"> 
    <thead> 
    <tr> 
     <th data-field="id">Name</th> 
     <th data-field="name">Item Name</th> 
     <th data-field="price">Item Price</th> 
    </tr> 
    </thead> 

    <tbody> 
    <tr> 
     <td class="collapsible" data-collapsible="accordion"> 
      <li> 
      <div class="collapsible-header">Alvin</div> 
      <div class="collapsible-body"> 
       <p> 
       hello 
       </p> 
      </div> 
      </li> 
     </td> 

     <td>Eclair</td> 
     <td>$0.87</td> 
    </tr> 
    <tr> 
     <td>Alan</td> 
     <td>Jellybean</td> 
     <td>$3.76</td> 
    </tr> 
    <tr> 
     <td>Jonathan</td> 
     <td>Lollipop</td> 
     <td>$7.00</td> 
    </tr> 
    </tbody> 
</table> 

Das Layout ist nicht so gut, aber wie erwartet funktioniert. Wenn Sie Materialize nur für die collapsible verwenden, empfehle ich Ihnen eine andere Komponente verwenden, wie Bootstrap Collapse