Comment basculer la visibilité des lignes du tableau avec les clics sur l'en-tête à l'aide de jQuery et CSS ?

Développer et réduire les lignes du tableau en cliquant sur l'en-tête

Cet article aborde le défi consistant à développer et à réduire des lignes de tableau spécifiques lorsque les colonnes d'en-tête correspondantes sont cliqué.

Le tableau HTML fourni se compose de lignes avec des sections d'en-tête alternées. Pour obtenir le comportement souhaité, nous exploiterons la puissance de jQuery.

Approche jQuery

1. Identifier les éléments d'en-tête : utilisez la classe .header pour déterminer lesquels les lignes du tableau servent d'en-têtes.
2. Basculer la visibilité : lorsque vous cliquez sur un en-tête, utilisez la méthode nextUntil pour sélectionner toutes les lignes qui suivent cet en-tête jusqu'à ce que l'en-tête suivant soit rencontré. La méthode slideToggle développe ou réduit ensuite les lignes sélectionnées.

Extrait de code

<code class="javascript">$('.header').click(function(){
    $(this).nextUntil('tr.header').slideToggle(1000);
});</code>

Approche alternative utilisant CSS et un pseudo-élément

1. Règle CSS : définissez un pseudo-élément avec la propriété :after pour représenter le signe d'expansion/réduction (ou -).
2. Classe CSS Toggle : attribuez un 'expand ' à l'en-tête cliqué et basculer son affichage en fonction de l'état du pseudo-élément.

Extrait de code

<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>

Ceci une approche alternative évite d'avoir à suivre plusieurs classes CSS, simplifiant ainsi la mise en œuvre.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!