Jquery toggle（）不適用於孫子女

Question

我正在嘗試開發一個顯示父 - 子孫子關係頁面的webpart。 Iam嘗試展開和摺疊孩子以顯示大孩子，但是當我嘗試展開子節點時，我的代碼正試圖摺疊父代。 Iam張貼我的jQuery和CSS文件，請幫助我，如果我做錯了什麼。

[更新]

我已經改變了我的代碼，這樣的事情......但現在的問題是，當您展開形象不改變，以 列表[ - ]。

謝謝。

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

第1步：打破所有你的Javascript出來爲獨立的文件。你正在使用jQuery，所以你的HTML中不應該存在JavaScript。步驟2：如果您使用XHTML作爲您的DOCTYPE，您需要我們li而不是LI，因爲在XML定義中大寫標籤名稱是非法的。

第3步：正如Pointy提到的，id必須是唯一的。 Here是如何與id s和class es合作的很好的參考。爲了便於擴展，我會將這些名稱更改爲class，因爲它們是通用名稱。我會假設你將從這裏改變成class es。

---

假設所有以上：

這裏是代碼的快速片段，應該給你一個想法，你應該如何接近的情況。

$('#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(); 
     } 
    } 
);