树状菜单完成步骤详解

  这是一个简单的树状菜单的效果，属于一个简单的入门效果，文章注重的是思路的构造，是以一个什么样的流程实现的，本文章针对只看高手源码看不懂的新手，引领大家一步一步了解效果实现的思想和构思。首先上图，了解一下树状菜单是什么样子的：

  

 

  当我们拿到要制作一个树形菜单效果的需求时，我们首先的第一步是需求分析：

  1.（如上图1）默认情况下，只显示省份（这里举例只有2个省份），这个代表一级菜单

  2.（如上图2）当点击某个省份的时候，显示出来这个省的城市列表，这个代表二级菜单

  3.（如上图3）当点击某个城市的时候，显示出这个城市的介绍，这个代表三级菜单

  明确需求并且分析之后，我们首先要来构造html的结构，我的思路如下：

 1 <div class="sub_treemenu">
 2   <div class="province">安徽省</div>
 3   <ul>
 4     <li>
 5     <p class="city">合肥市</p>
 6     <p class="art">这是一个非常好的地方，怎么地怎么地怎么地怎么地了，有什么好吃的有什么好玩儿的，有什么灵异事件</p>
 7     </li>
 8     <li>
 9     <p class="city">芜湖市</p>
10     <p class="art">这是一个非常好的地方，怎么地怎么地怎么地怎么地了，有什么好吃的有什么好玩儿的，有什么灵异事件</p>
11     </li>
12     <li>
13     <p class="city">安庆市</p>
14     <p class="art">这是一个非常好的地方，怎么地怎么地怎么地怎么地了，有什么好吃的有什么好玩儿的，有什么灵异事件</p>
15     </li>
16   </ul>
17 </div>

    从上面的代码可以看出，首先一个代码块包含2部分，第一个是省份，第二部分是一个隐藏的ul列表，ul列表里就是这个省份所包含的城市，第二部分里面又包括了两部分，一部分是显示城市名称，另一部分是一个隐藏的文字介绍p。截至到此，我们已经把树形菜单的html结构写完了。   之后我们需要考虑的就是效果的实现，默认情况下，城市列表的层和城市介绍的层是隐藏的。当我们点击省份的时候，要显示出来跟它对应的城市列表。点击城市，需要显示出来跟城市相对应的城市介绍，这里有一个关键问题就是“相对应的”。

    接下来我们就应在在html结构的基础上来写上Jq的代码，先贴上代码，下面再来分析：  

 1 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
 2 <script type="text/javascript">
 3 $(document).ready(function(){
 4          $(".province").click(function(){
 5                  $(this).parent("div").find("ul").toggle();
 6                  })
 7          $(".city").click(function(){
 8                  $(this).parent("li").find(".art").toggle();
 9                  })
10          })
11 </script>

  树状菜单的知识点就是当前元素的父元素和子元素的获取上，效果就是show()、hide()、toggle()来实现。       下面来分析代码：
       <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
        这句就是引入google的类库。

        $(".province").click(function(){$(this).parent("div").find("ul").toggle();})
        这句代码的意思：当我们点击类名为province的div时，$(this).parent("div") 代表找到自己的父元素，find("ul") 是找到它里面的ul，.toggle() 就是show()和hide()的升级版，意思是如果元素是show的时候点击就变成hide，如果元素是hide点击就变成show，那么这句代码连在一起翻译就是：当点击province的时候找到它的父元素，再在他的父元素里面找到ul，让这个ul如果是show点击后就变成hide，如果是hide点击后就变成show。

        为什么要用找到父元素这个方法呢？原因是树状菜单一般不是一组的，是很多组的，为了让我们的html代码能够可用性高，所以我们用这个匹配自己父元素的方法，不然的话如果你写死了的话，就要为每个代码块都要重复写JS代码。

      $(".city").click(function(){$(this).parent("li").find(".art").toggle();}) 
       这句代码和上一句的原理是一样的，只是类名不同，上一个代码province的父元素是div所以是parent("div")，本段代码的父元素是li所以用的是parent("li")。

        这样写出来的代码就可以作为一个模板来用，例如我一开始的需求是总共才6个省，后来需要我再增加2个省，那我只需要在html结构中在增加2个省的代码块就可以，JS的可用性比较高。

       用到的知识点总结：.parent()获取父元素、.find()查找、.toggle()元素隐藏和显示的切换

       最后附上完整的代码：

     

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>树形菜单demo</title>
 6 <style>
 7 body,div,ul,li,p,a,span{margin:0px;padding:0px;}
 8 .treemenu{width:200px;border:2px solid #0CF;margin:20px;padding:10px;}
 9 .sub_treemenu{width:200px;}
10 .province{width:195px;height:28px;font-size:16px;line-height:28px;padding-left:5px;font-weight:bold;cursor:pointer;background:#CCC;border-bottom:1px solid #333;}
11 ul,li{list-style:none;}
12 ul{padding-left:20px;display:none;}
13 li{margin:4px 0px;}
14 .art{display:block;width:120px;margin-left:20px;font-size:12px;background:#063;padding:5px;color:#FFF;display:none;}
15 .city{font-size:14px;padding:2px 0px;cursor:pointer;}
16 </style>
17 </head>
18 
19 <body>
20 <div class="treemenu">
21 <!--安徽省 starting-->
22 <div class="sub_treemenu">
23   <div class="province">安徽省</div>
24   <ul>
25     <li>
26     <p class="city">合肥市</p>
27     <p class="art">这是一个非常好的地方，怎么地怎么地怎么地怎么地了，有什么好吃的有什么好玩儿的，有什么灵异事件</p>
28     </li>
29     <li>
30     <p class="city">芜湖市</p>
31     <p class="art">这是一个非常好的地方，怎么地怎么地怎么地怎么地了，有什么好吃的有什么好玩儿的，有什么灵异事件</p>
32     </li>
33     <li>
34     <p class="city">安庆市</p>
35     <p class="art">这是一个非常好的地方，怎么地怎么地怎么地怎么地了，有什么好吃的有什么好玩儿的，有什么灵异事件</p>
36     </li>
37   </ul>
38 </div>
39 <!--安徽省 ending-->
40 <div class="sub_treemenu">
41     <div class="province">湖北省</div>
42     <ul>
43       <li>
44       <p class="city">合肥市</p>
45       <p class="art">这是一个非常好的地方，怎么地怎么地怎么地怎么地了，有什么好吃的有什么好玩儿的，有什么灵异事件</p>
46       </li>
47       <li>
48       <p class="city">芜湖市</p>
49       <p class="art">这是一个非常好的地方，怎么地怎么地怎么地怎么地了，有什么好吃的有什么好玩儿的，有什么灵异事件</p>
50       </li>
51       <li><p class="city">安庆市</p>
52       <p class="art">这是一个非常好的地方，怎么地怎么地怎么地怎么地了，有什么好吃的有什么好玩儿的，有什么灵异事件</p>
53       </li>
54     </ul>
55   </div>
56  </div>
57  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
58  <script type="text/javascript">
59  $(document).ready(function(){
60      $(".province").click(function(){
61          $(this).parent("div").find("ul").toggle();
62          })
63      $(".city").click(function(){
64          $(this).parent("li").find(".art").toggle();
65          })
66      })
67  </script>
68 </body>
69 </html>

 

 

posted on 2012-10-19 09:59  猫猫没睡醒  阅读(385)  评论(0)    收藏  举报

导航