用jQuery做一个菜单的展开与收起的例子，出不来效果哪位大侠帮忙看看该怎么改

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>菜单展开收起</title>
<script type="text/javascript" src="jquery-1.7.2.js" ></script>
<script type="text/javascript">
$(document).ready(function(e) {
$(".Child").css("display","none");
});function spreadOrRetract(){

if($(this).attr("src") === "add.jpg"){//展开
$(this).click(function(){
$(this).parent().parent().children("div").show();//显示子元素

    $(this).attr("src","subtract.jpg");//改变图标为-
});
}

if($(this).attr("src") === "subtract.jpg"){//收起
$(this).click(function(){
$(this).parent().parent().children("div").hide();//隐藏子元素

    $(this).attr("src","add.jpg");//改变图标为+
});
}

}
</script>
</head> <body>
    <div> <a href="#"><img src="add.jpg" id="c" onclick="spreadOrRetract()"/></a> C: 
        
        <div class="Child"> <br /> &nbsp;&nbsp;&nbsp;<a href="#"><img src="add.jpg"/></a> DRIVERS</div>
        
        <div class="Child"> <br /> &nbsp;&nbsp;&nbsp;<a href="#"><img src="add.jpg"/></a> Intel</div>
       
        <div class="Child"> <br /> &nbsp;&nbsp;&nbsp;<a href="#"><img src="add.jpg"/></a>PerfLogs</div>
        
    </div>
    
    
    <br />
    <div style="height:"> <a href="#"><img src="add.jpg"/></a> D:</div>
    <br />
    <div> <a href="#"><img src="add.jpg"/></a> E:</div>
    <br />
    <div> <a href="#"><img src="add.jpg"/></a> F:</div>
    
</body>
</html>
jQueryHTML菜单树展开收起

解决方案 »

  1.   

    不带这么写的 jquery都用了 咋还在标签上加onclick 删了用bind~ 
    img外面的a是有默认链接事件的，要真是想点img 得阻止冒泡啊。不过用a的click就行 点img没必要
      

  2.   

    首先 谢谢了 大师   不是这个意思 因为有多个菜单 菜单下分别又有多个子菜单 （如打开C：盘 C：盘下又有多个 可以分别打开； D盘又如C盘  ） 所以得循环调用一个方法 所以我想用this  写一个方法 所有有子菜单的菜单都能调用   就是我想自己写一个tree
      

  3.   

    你用Jquery的siblings方法肯定没问题，你试试吧，挺简单的！