0
我正在嘗試開發一個顯示父 - 子孫子關係頁面的webpart。 Iam嘗試展開和摺疊孩子以顯示大孩子,但是當我嘗試展開子節點時,我的代碼正試圖摺疊父代。 Iam張貼我的jQuery和CSS文件,請幫助我,如果我做錯了什麼。Jquery toggle()不適用於孫子女
[更新]
我已經改變了我的代碼,這樣的事情......但現在的問題是,當您展開形象不改變,以 列表[ - ]。
謝謝。
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[–]</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[–]</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>
難道你不覺得如果我們也可以看看Javascript代碼嗎? – Pointy 2010-09-02 13:03:54
另外:我真的希望你沒有爲每個*這樣的列表使用「GrandChildrenList」 - 一個「id」值只能在任何給定的頁面上出現一次。 – Pointy 2010-09-02 13:04:31