ITPub博客

首页 > 应用开发 > IT综合 > 从用户管理系统中复习javaweb知识8

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

原创 IT综合 作者:William茌 时间:2015-10-29 10:50:12 0 删除 编辑
今天继续复习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. #box{margin:19px;width:300px;padding:0 10px;}
  8.     #box ul{padding-left:20px;margin-top:5px;}
  9.     #box li.m{background:url(img/m.gif) no-repeat 2px 8px;cursor:pointer;text-indent:17px;padding:5px 0;}
  10.     #box li.p{background:url(img/p.gif) no-repeat 2px 8px;}
  11. </style>
  12. <script type="text/javascript" src="jquery/jquery-1.9.1.min.js"></script>
  13. <script>
  14. $(function(){
  15.     $("li:has(ul)").addClass("p");
  16.    $("ul:eq(0)>li ul").hide(); //这是查看ul序号为0下的li 下的ul.
  17.     $("p").click(function(){
  18.         $(this).parent(":has(ul)").find(">ul").toggle().end().toggleClass("p");
  19.     });
  20. });
  21. </script>



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

请登录后发表评论 登录
全部评论

注册时间:2014-09-14

  • 博文量
    25
  • 访问量
    44108