problème de sélecteur jquery dans l'expansion hiérarchique / arbre effondrement

Question

Je suis en train de construire un écran qui sera une liste hiérarchique des signets, regroupés en catégories. Les catégories peuvent être étendues / contractées pour afficher ou masquer les signets pour cette catégorie. En ce moment, je travaille juste sur l'interface utilisateur et en utilisant jquery pour la première fois (et aimer).

La méthode que je utilise est sorta comme l'accordéon, mais plus d'une section peut être ouverte en même temps, et il peut y avoir plusieurs niveaux de profondeur (accordéon ne supporte qu'un seul niveau). Pour chaque catégorie, il y a une div avec une image d'un dossier dans ce qui afficher ou masquer l'élément suivant dans les DOM, qui serait la collection de signets (généralement un

). par exemple:

<div class="categoryLine" id="d4">
    <img class="folder"....>
    Fourth Menu Item
</div>
<ul id="u4">
    <li id="l41">

Je sélectionne l'élément à fermer à l'aide $(this).parentsUntil('categoryLine').next().toggle(transitionSpeed); où la div autour de l'image les clics de l'utilisateur sur a une classe de categoryLine, et la chose à afficher / cacher est l'élément suivant que div.

Le problème est le plus complexe partie (la plus profonde de la hiérarchie), certaines choses sont cachées qui ne devraient pas être, et réapparaissant pour des raisons inconnues.

Vous pouvez voir un "travail" exemple . J'ai donné les ID tags pertinents et mis dans une alerte de débogage pour afficher l'ID de l'élément cliqué sur les éléments et à être ouvert et fermé (voir la source pour voir ce sujet).

1. Cliquez sur le dossier pour cette catégorie pour réafficher « Menu Quatrième élément ». Vous devriez voir sous 1, sous 2, et sous 3 apparaissent.
2. Cliquez sur le dossier pour « Menu Quatrième article sous 1 ». Vous devriez voir sous 1 étendre, mais sous 2 disparaît complètement, y compris la ligne de la catégorie. Tel est le mystère que je suis en train de résoudre. En cliquant sur la sous 1 dit correctement « Basculement « U411 » de la catégorie « d41 » » mais quand le U411
   disparaît, le fait tous sous 2 disparait. De même, si je clique sur le dossier pour le développer disparaît SUB2, sub3.

Je suis ouvert à mettre en œuvre ce d'une manière complètement différente (encore une fois, ceci est ma première expérience jquery). Je serais également disposé à examiner des solutions où une seule catégorie pourrait être ouverte à la fois, aussi longtemps qu'il soutenait encore une hiérarchie au lieu d'un profond comme l'accordéon.

Merci d'avance.

Answer 1

jQuery décrit parentsUntil() comme:

  

Description: Obtenir les ancêtres de chaque élément dans l'ensemble courant d'éléments jumelés, jusqu'à, mais non y compris l'élément identifié par le sélecteur

.

La partie importante à noter qu'il est que vous n'êtes pas sélectionner .categoryLine. Il semble que si vous voulez être compris cependant. Si le travail si vous utilisez closest() à la place.

$(this).closest('.categoryLine').next().toggle(transitionSpeed); 

une note de côté pour référence ultérieure. ('categoryLine') est pas un sélecteur. En règle générale, vous devez inclure le ., # ou type d'élément, à savoir div. Il existe des méthodes plus avancées cependant. Vous pouvez lire sur sélecteurs jQuery .