jQuery树形菜单

来源：互联网发布：淘宝运营自我评价编辑：程序博客网时间：2024/05/10 17:19

项目之余写一个简单的树形菜单，作为记录，以后再用到的时候可以参考。

代码：

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>树形菜单</title>
<link href="resources/css/page.css" rel="stylesheet" type="text/css">
<style type="text/css">
#content{
position: absolute;
top: 0px;
left: 0px;
background: #FAFAFA;
width: 200px;
height: 100%;
}
#treeDiv{
position: absolute;
top: 20px;
left: 20px;
}
.child{
padding-left: 20px;
}
ul li{
height: 30px;
}
</style>
</head>
<body topmargin="0" leftmargin="0">
<div id="content">
   <div id="treeDiv">
       <ul class="parent">
           <li><a href="#"><span></span><img src="resources/images/arrow_1.png" style="width: 9px;height:9px;"/>&nbsp父菜单1</a></li>
       </ul>
       <ul class="child">
          <li><a href="#" target="mainFrame">子菜单1</a></li>
          <li><a href="#" target="mainFrame">子菜单2</a></li>
       </ul>
       <ul class="parent">
           <li><a href="#"><img src="resources/images/arrow_1.png" style="width: 9px;height:9px;"/> 父菜单2</a></li>
       </ul>
       <ul class="child">
          <li><a href="#">子菜单3</a></li>
          <li><a href="#">子菜单4</a></li>
       </ul>
   </div>
</div>
<script type="text/javascript" src="resources/js/jquery/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
   $(function(){
       //初始化子菜单
       $("ul:[class='child']").hide();
       //点击父菜单，子菜单变换显示
       $("ul:[class='parent']").click(function(){
           if($(this).next().is(":hidden")){
               $("ul:[class='child']").hide();
               $(this).next().show();
               $("ul").find('img').attr("src", "resources/images/arrow_1.png");
               $(this).find('img').attr("src", "resources/images/arrow_2.png");
           }else{
               $(this).next().hide();
               $(this).find('img').attr("src", "resources/images/arrow_1.png");
           }
       });
   });
</script>
</body>
</html>

0 0