Jquery toggle() ne fonctionne pas pour les petits-enfants

Question

J'essaye de développer un webpart qui montre des pages dans la relation parent-enfant-petit-enfant. J'essaie d'agrandir et de réduire les enfants pour montrer les petits enfants, mais mon code essaie de réduire le parent lorsque j'essaie d'étendre le noeud enfant. Je poste mes fichiers jquery et css s'il vous plaît aidez-moi si je fais quelque chose de mal.

[mis à jour]

J'ai changé mon code à quelque chose comme ça ... Mais maintenant, le problème est lorsque vous développez la liste l'image ne change pas à [-].

Merci.

Code Jquery:

<script> 
function handleClick(ev) { 
ev = ev || window.event; 
if(ev.preventDefault) { 
ev.preventDefault(); 
} else if('cancelBubble' in ev) { 
ev.cancelBubble = true; 
} 
} 
</script> 

<DIV id="divNav"> 
<DIV id="divNavHeader"></DIV> 
<UL> 
    <LI onMouseOver="javascript: $(this).hover(function() {$(this).addClass('parentHover');}, function() { $(this).removeClass('parentHover');});" onclick="javascript: $(this).children().toggle();" id="liCurrentParentChild"><span class="plus">Parent1[+]</span><span class="minus">Parent1[&#8211]</span> 
    <ul id="childCurrentList"> 
    <LI onMouseOver="javascript: $(this).hover(function() {$(this).addClass('childHover');}, function() { $(this).removeClass('childHover');});" id="liCurrentChild"><a href="Parent1.aspx">Parent1</a></LI> 
    <LI onMouseOver="javascript: $(this).hover(function() {$(this).addClass('childHover');}, function() { $(this).removeClass('childHover');});" onclick="javascript: $(this).children('ul').toggle(); debugger; handleClick(event);" id="liCurrentParentGrandChild"><span class="plus">Parent1child1[+]</span><span class="minus">Parent1child1[&#8211]</span> 
    <ul id="GrandChildrenList"> 
     <LI onMouseOver="javascript: $(this).hover(function() {$(this).addClass('grandchildHover');}, function() { $(this).removeClass('grandchildHover');});" id="liCurrentgrandChild ><a href="Parent1child1.aspx">Parent1child1</a></LI> 
     <LI onMouseOver="javascript: $(this).hover(function() {$(this).addClass('grandchildHover');}, function() { $(this).removeClass('grandchildHover');});" ><a href="Parent1grandchild1.aspx">Parent1grandchild1</a></LI> 
    </ul> 
    </LI> 
    </ul> 
    </LI> 
    <LI onMouseOver="javascript: $(this).hover(function() {$(this).addClass('parentHover');}, function() { $(this).removeClass('parentHover');});" ><a href="Parent2.aspx">Parent2</a></LI> 

</UL> 
</DIV> 

css:

<style> 
#childList { display: none; } 
#GrandChildrenList { display: none; } 

.parentHover, #hover-demo1 p:hover 
{ 
    background: #CBCCC0; 
} 

.childHover, #hover-demo1 p:hover 
{ 
    background: #CBCCC0; 
} 

.grandchildHover, #hover-demo1 p:hover 
{ 
    background: #CBCCC0; 
} 

.parentchildHover, #hover-demo1 p:hover 
{ 
    background: #FFFFFF; 
} 

.minus { display: none; } 

.plus { display: inline; } 

.plus{ 
    color: #001A49; 
    padding: 3px 0px 3px 0px; 
    margin: 0 0 5px 0; 
    } 

.minus { 
    color: #001A49; 
    padding: 3px 0px 0px 0px; 
    margin: 0 0 0px 0; 
    } 



#divNavHeader 
{ 
    margin: 2px 0px 0 0px; 
    padding: 5px 0px 5px 10px; 
    background:#001A49; 
    color: #FFFFFF; 
    font-weight:600; 
    width:260px; 
} 
#divNav 
{ 
    margin: 2px 10px 0 0px; 
    padding:0 0 0 0px; 
    border:solid 1px #33333; 
} 

#divNav ul 
{ 
margin: -1px 0 0px 0px; 
padding:0px 0 0px 0px; 
cursor:pointer; 
} 

#divNav li 
{  
margin: 0px 4px 0px 4px; 
padding:3px 0 3px 10px; 
list-style-type: none; 
border-top:solid 1px #333333; 
} 

#divNav li ul /*{display: none;} */ 
{ 
margin-top:3px; 

} 

#liCurrent 
{ 
background: #CBCCC0; 
color:#FFFFFF; 
} 

#liParentChild 
{ 
background: #ffffff; 
color:#001A49; 
} 

#liGrandChild 
{ 
background: #ffffff; 
color:#001A49; 
} 


#liParentChild .minus 
{ 
background: #ffffff; 
color:#001A49; 
} 

#liGrandChild .minus 
{ 
background: #ffffff; 
color:#001A49; 
} 


#liCurrentParentChild 
{ 
background: #ffffff; 
color:#001A49; 
} 

#liCurrentParentGrandChild 
{ 
background: #ffffff; 
color:#001A49; 
} 


#liCurrentgrandChild 
{ 
background: #ffffff; 
color:#001A49; 
} 

#liCurrentParentChild .plus 
{ 
background: #ffffff; 
color:#001A49; 
} 

#liCurrentParentGrandChild .plus 
{ 
background: #ffffff; 
color:#001A49; 
} 


#liCurrentChild 
{ 
background:#CBCCC0; 
color:#FFFFFF; 
} 

#liCurrentgrandChild 
{ 
background:#CBCCC0; 
color:#FFFFFF; 
} 
#liCurrentgrandChild .minus 
{ 
background:#CBCCC0; 
color:#FFFFFF; 
} 
#liCurrentChild .minus 
{ 
background:#CBCCC0; 
color:#FFFFFF; 
} 

/* 


#divNav ul li:hover , 
#divNav ul li a:hover {       
display:block; 
position:relative; 
margin:0; 
top:15px;    
left:30px;  
height:auto;  
width:13.5em; 
color:black;       
background:#999999   
} 

#divNav ul.li:hover , 
#divNav ul.li a:hover {  
left:auto; 
right:0;   
} 

* html #divNav ul.li a:hover {   
right:-1px; 
} 

#divNav li ul {display: none;} 
#divNav li:hover > ul {display: block;} 
*/ 
</style> 


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 

Answer 1

Étape 1: Briser TOUS votre Javascript dehors dans des fichiers séparés. Vous utilisez jQuery, donc il ne devrait pas y avoir de Javascript flottant dans votre HTML. Étape 2: Si vous utilisez XHTML comme DOCTYPE, vous devez utiliser li, et non LI, car les noms de balise en majuscules sont illégaux dans la définition XML. Étape 3: Comme Pointy mentionné, un id DOIT être unique. Here est une bonne référence quant à la façon de travailler avec id s et class es. Pour que cela soit plus facile à étendre, je changerais ces noms en class es, car ce sont des noms génériques. Je vais supposer que vous allez les changer en class es à partir de maintenant.

---

ASSUMER TOUS CI-DESSUS:

Voici un extrait rapide de code qui devrait vous donner une idée de la façon dont vous devriez aborder la situation.

$('#divNav').delegate('liCurrentParentChild', 'click', 
    function (e) 
    { 
     var $this = $(this); //This line allows you to not have to re-find 'this' 
          //in case you need to use it later in the function. 
     var $children = $this.children(); //Same thing as the last line, but with 
              //the children of $this. 

     //Check first child element to see if it has been shown before. 
     if('block' == $children.css('display')) 
     { 
      $children.hide(); 
     } 
     else 
     { 
      $children.show(); 
     } 
    } 
);