2010-09-23 4 views
-1

J'ai une disposition de table que j'utilise comme barre de navigation. C'est comme un arbre-menu où certaines lignes sont en-têtes pour ceux ci-dessous. Il va un peu comme ça (quelques balises retirées pour une meilleure lisibilité):Table de navigation JQuery. Montrer et cacher tous les autres rangs?

<table id = "QLM"> 

<tbody> 
<tr id = "QLM0"> 
<tr style = "display: table-row"> 
<tr id = "QLM2"> 
<tr style = "display: table-row"> 
<tr id = "QLM3"> 
<tr style = "display: table-row"> 
<tr id = "QLM4"> 
<tr style = "display: table-row"> 
</tbody> 

</table> 

Chaque ligne contient un <td> avec une autre table à l'intérieur.

J'ai quelques jQuery qui affiche et cache les lignes lorsque vous cliquez sur les lignes au-dessus d'elles (c'est-à-dire que vous cliquez sur celles qui ont des ID pour masquer/afficher celles avec des étiquettes de style). La seule chose est, je le veux que quand une ligne (id) est montrée, les autres (les lignes de style) sont toutes cachées.

Ceci est mon jQuery jusqu'à présent:

menuHd.click(function() { 
    var styleElm = $(this).find("td:last"); 
    var nextTR = $(this).next("tr:not([id])"); 
    if (nextTR.is(':visible')) { 
    nextTR.hide(); 
    styleElm.css(cssClosed); 
    } else { 
    nextTR.show(); 
    styleElm.css(cssOpen); 
    } 
    }); 

Répondre

0

Vous pouvez utiliser le sélecteur :even pour sélectionner les lignes et le sélecteur a identifié :odd pour sélectionner les lignes de style, car ils changent toujours entre eux.

(Edit: vient même d'abord, parce que la sélection est basée sur zéro, selon le documentation)

+0

Oui, j'ai vu ça mais je ne sais pas trop comment l'utiliser. Dans l'exemple ci-dessus serait-ce quelque chose comme: $ ("this"). Find ("tr: impair"). Hide(); –

0

essayer

$("tr:not([id])").hide(); 

avant

nextTR.show(); 

dans le code ur. Cela devrait résoudre votre problème et cacher toutes les autres lignes sans attribut id avant d'afficher la ligne actuelle. pas encore testé

Questions connexes