Tabellenzeilen beim Klicken auf die Kopfzeile erweitern und reduzieren
Dieser Artikel befasst sich mit der Herausforderung, bestimmte Tabellenzeilen zu erweitern und zu reduzieren, wenn die entsprechenden Kopfzeilenspalten vorhanden sind angeklickt.
Die bereitgestellte HTML-Tabelle besteht aus Zeilen mit abwechselnden Kopfabschnitten. Um das gewünschte Verhalten zu erreichen, nutzen wir die Leistungsfähigkeit von jQuery.
jQuery-Ansatz
Code-Snippet
<code class="javascript">$('.header').click(function(){ $(this).nextUntil('tr.header').slideToggle(1000); });</code>
Alternativer Ansatz unter Verwendung von CSS und einem Pseudo-Element
Code-Snippet
<code class="css">.header .sign:after{ content:"+"; display:inline-block; } .header.expand .sign:after{ content:"-"; }</code>
<code class="javascript">$(this).toggleClass('expand').nextUntil('tr.header').slideToggle(100);</code>
Dies Der alternative Ansatz vermeidet die Notwendigkeit, mehrere CSS-Klassen zu verfolgen, was die Implementierung vereinfacht.
Das obige ist der detaillierte Inhalt vonWie schalte ich die Sichtbarkeit von Tabellenzeilen mit Header-Klicks mithilfe von jQuery und CSS um?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!