ITPub博客

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

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

原创 IT综合 作者:William茌 时间:2015-10-28 21:15:44 0 删除 编辑
这几天并没有偷懒,而是从w3c中再复习jQuery的内容,前台对我来说就是一个短板,平时在学习的时候没有注意学习这些东西,这次javaweb的复习历程便是一个查缺补漏的过程。经过前两天的理论学习今天进入了实战。我做了一个折叠菜单,先来说一下我在做这个菜单的过程中遇到的问题。
1.基本的css标签忘得差不多了。
2.折叠菜单只能实现打开,再点击另一个父菜单时,先前打开的菜单不能关闭。
通过百度,最终解决了问题。现在把代码粘贴一下。

点击(此处)折叠或打开

  1. <style type="text/css">
  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. li.parent{border:1px #ddd solid;background:#F9F9F9;line-height:30px;text-indent:10px;margin:1px;cursor:pointer;}
  8. li.se{border:1px #CC3300 solid;background:#FF6;color:#900000;font-weight:bold;}
  9. li.child li{background:#FFF;border:1px #F9F9F9 solid;line-height:24px;text-indent:30px;}
  10.     </style>

  11.     
  12.     <script type="text/javascript" src="jquery/jquery-1.9.1.min.js"></script>
  13.     <script>
  14. $(document).ready(function(){
  15.         $(".child").hide();
  16.         $(".parent").click(function(){
  17.         $(this).siblings().removeClass('se');
  18.         $(this).next().toggle();
  19.         $(this).toggleClass('se');
  20.         $(".child").not($(this).next()).hide();
  21.         
  22.     });
  23.     });
  24.     </script>
html代码

点击(此处)折叠或打开

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

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

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

注册时间:2014-09-14

  • 博文量
    25
  • 访问量
    44068