从用户管理系统中复习javaweb知识8

今天继续复习jQuery的知识，做一个菜单树。
先贴一下html的代码

点击(此处)折叠或打开

1. <div id="box">
   
2.     <ul>
   
3.         <li class="m"><p>首 页</p></li>
   
4.         <li class="m"><p>组织机构</p>
   
5.             <ul>
   
6.                 <li class="m"><p>公司简介</p>
   
7.                     <ul>
   
8.                         <li class="m"><p>公司理念</p></li>
   
9.                         <li class="m"><p>企业文化</p></li>
   
10.                     </ul>
    
11.                 </li>
    
12.                 <li class="m"><p>部门职能</p></li>
    
13.                 <li class="m"><p>联系我们</p></li>
    
14.             </ul>
    
15.         </li>
    
16.         <li class="m"><p>新闻动态</p>
    
17.             <ul>
    
18.                 <li class="m"><p>公司动态</p></li>
    
19.                 <li class="m"><p>行业新闻</p></li>
    
20.                 <li class="m"><p>通知公告</p></li>
    
21.             </ul>
    
22.         </li>
    
23.         <li class="m"><p>产品中心</p>
    
24.             <ul>
    
25.                 <li class="m"><p>产品列表</p></li>
    
26.                 <li class="m"><p>产品分类</p></li>
    
27.                 <li class="m"><p>成功案例</p></li>
    
28.             </ul>
    
29.         </li>
    
30.     </ul>
    
31.     </div>

html的设计并不能，关键是jQuery的实战比较难，现在粘贴一下js代码

点击(此处)折叠或打开

1. <style>
   
2. *{margin:0;padding:0;}
   
3. html,body{width:100%;height:100%;font-family:'微软雅黑'}
   
4. ul{list-style:none;}
   
5. h3{margin:20px;padding:5px;width:300px;background:#ccc;text-align:center;border:1px #444 solid;letter-spacing:4px;}
   
6. #box{margin:19px;width:300px;}
   
7. 
   
8. #box{margin:19px;width:300px;padding:0 10px;}
   
9.     #box ul{padding-left:20px;margin-top:5px;}
   
10.     #box li.m{background:url(img/m.gif) no-repeat 2px 8px;cursor:pointer;text-indent:17px;padding:5px 0;}
    
11.     #box li.p{background:url(img/p.gif) no-repeat 2px 8px;}
    
12. </style>
    
13. <script type="text/javascript" src="jquery/jquery-1.9.1.min.js"></script>
    
14. <script>
    
15. $(function(){
    
16.     $("li:has(ul)").addClass("p");
    
17.    $("ul:eq(0)>li ul").hide(); //这是查看ul序号为0下的li 下的ul.
    
18.     $("p").click(function(){
    
19.         $(this).parent(":has(ul)").find(">ul").toggle().end().toggleClass("p");
    
20.     });
    
21. });
    
22. </script>

来自 “ ITPUB博客 ” ，链接：http://blog.itpub.net/29876573/viewspace-1818025/，如需转载，请注明出处，否则将追究法律责任。

转载于:http://blog.itpub.net/29876573/viewspace-1818025/