jQuery 树形菜单

JQ_Tree_Demo

  • 导航1
    • 导航1-1
    • 导航1-2
    • 导航1-3
  • 导航2
    • 导航2-1
  • 导航3
    • 导航3-1
    • 导航3-2
    • 导航3-3
    • 导航3-4
  • 导航4
  • <!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>JQ_Tree_Demo</title>
<script type="text/javascript" src="jquery-1.7.1.min.js" ></script>
<script type="text/javascript">
$(function(){
           $(".ul_hide>li").click(function(e){ 
                                           //阻止事件冒泡,则不触发$("#ul_li>li").click事件
                                           e.stopPropagation();
});
           $("#ul_li>li").click(function(){
                                           var index = $(this).index();
                                           $(".ul_hide").eq(index).slideToggle(500);
                                           /*    点击时其他隐藏
                                           $(".ul_hide").each(function(){
                                                                       if($(".ul_hide").index($(this))===index){
                                                                           $(this).slideToggle(500);
                                                                       }else{
                                                                           $(this).hide();
                                                                       }
                                                                       });*/
                                  })
           
           });
</script>
<style type="text/css">
body, th, td {
    margin:0;
    padding:0;
}
ul {
    list-style-type:none;
}
ul li{
    cursor:pointer;
}
.ul_hide{
    display:none;
    cursor:default;
}
</style>
</head>
<body>
<ul id="ul_li">
  <li >导航1
    <ul class="ul_hide">
      <li>导航1-1</li>
      <li>导航1-2</li>
      <li>导航1-3</li>
    </ul>
  </li>
  <li id="ul_2">导航2
    <ul class="ul_hide">
      <li>导航2-1</li>
    </ul>
  </li>
  <li id="ul_3">导航3
    <ul class="ul_hide">
      <li>导航3-1</li>
      <li>导航3-2</li>
      <li>导航3-3</li>
      <li>导航3-4</li>
    </ul>
  </li>
  <li id="ul_4">导航4
    <ul class="ul_hide">
      <li>导航3-1</li>
      <li>导航3-2</li>
      <li>导航3-3</li>
      <li>导航3-4</li>
    </ul>
  </li>
</ul>
</body>
</html>

     

    • 导航3-1
    • 导航3-2
    • 导航3-3
    • 导航3-4
posted @ 2012-05-17 17:35  时生  阅读(257)  评论(0)  编辑  收藏  举报