2009-08-06 5 views
0

J'ai une liste imbriquée qui liste les nœuds enfants lorsque le nœud parent est développé. Le nœud parent est développé en cliquant sur une image à gauche du texte.Le menu Arborescence ne défile pas

Malheureusement, il se développe directement sur la page. Je voudrais qu'une barre de défilement apparaisse lorsque le contenu est hors de la page.

Lorsque je règle "overflow: auto", une barre de défilement n'apparaît jamais, elle agrandit simplement la page et supprime l'image d'expansion à gauche des éléments de la liste.

échantillon est ici .html:

<body> 
    <div id="theDiv" style="clear: left;"> 
    <ul id="theList"> 
     <li id="1" class="parent"> 
     <img class="expanded" align="absmiddle" src="./tree_expanded.gif"/> 
     Parent1 
     <ul style="display: block;"> 
      <li id="10"> 
      ..... 
     </ul> 
     </li> 
     .... 
    </ul> 
    </div> 
</body> 

échantillons VOICI .js:

function expand() { 
    if(this.className == "expand") { 
    jQuery(this.parentNode).children("ul").show(); 
    this.className = "expanded"; 
    this.src = "/_images/tree_expanded.gif"; 
    } 
else { 
    jQuery("ul", this.parentNode).hide(); 
    this.className = "expand"; 
    this.src = "/_images/tree_unexpanded.gif"; 
} 
} 

échantillon est ici Css:

#theList { 
    margin-top: 0; 
} 

#theList, #theList ul { 
    list-style: none; 
    margin: 5px 20px; 
    padding: 0; 
} 

#theList .expand, #theList .expanded { 
    margin-left: -20px; 
    cursor: pointer; 
} 

#theList img { 
    margin-right: 5px; 
} 

#theList ul { 
    display: none; 
} 

#theList li { 
    white-space: nowrap; 
    margin-bottom: 4px; 
} 
+0

J'ai omis de mentionner des choses que j'ai essayées. Le premier étant la définition de la hauteur de la div à quelque chose de spécifique et le overlow-y: auto et scroll. Toujours eu le même résultat –

+0

J'ai été précipité quand j'ai dit qu'il avait exactement le même résultat. Quand j'ai ajouté une hauteur et que je fais défiler jusqu'à la liste div, j'ai obtenu une barre de défilement. Mais les images d'agrandissement disparaissent. –

Répondre

0

d'abord, définir une largeur définitive de la conteneur div, donc il sait quand commencer à défiler. Ensuite, définissez-le sur overflow-x: scroll; Ou quelque chose à cet effet. Ca devrait marcher :)

0

Ok, j'étais sur la bonne voie mais pas assez persistant. CSS me rend vraiment fou. J'ai besoin de définir à la fois la div et la hauteur de la liste pour le faire défiler. J'essayais l'un ou l'autre, pas les deux.

Je suis un tel n00b.

+0

Maintenant, j'ai un nouveau problème. Firefox fonctionne bien, mais c'est à dire arrêté d'afficher les images, donc il ne sera pas développé –

Questions connexes