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

点击(此处)折叠或打开

<style type="text/css">
*{margin:0;padding:0;}
html,body{width:100%;height:100%;font-family:'微软雅黑'}
ul{list-style:none;}
h3{margin:20px;padding:5px;width:300px;background:#ccc;text-align:center;border:1px #444 solid;letter-spacing:4px;}
#box{margin:19px;width:300px;}
li.parent{border:1px #ddd solid;background:#F9F9F9;line-height:30px;text-indent:10px;margin:1px;cursor:pointer;}
li.se{border:1px #CC3300 solid;background:#FF6;color:#900000;font-weight:bold;}
li.child li{background:#FFF;border:1px #F9F9F9 solid;line-height:24px;text-indent:30px;}
</style>
<script type="text/javascript" src="jquery/jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function(){
$(".child").hide();
$(".parent").click(function(){
$(this).siblings().removeClass('se');
$(this).next().toggle();
$(this).toggleClass('se');
$(".child").not($(this).next()).hide();
});
});
</script>

html代码

点击(此处)折叠或打开

<div id="box">
<ul id="list">
<li class="parent">首页</li>
<li class="child">
<ul>
<li>产品宣传</li>
<li>公司简介</li>
<li>公司理念</li>
<li>联系我们</li>
</ul>
</li>
<li class="parent">组织机构</li>
<li class="child">
<ul>
<li>公司简介</li>
<li>公司理念</li>
<li>企业文化</li>
<li>部门职能</li>
<li>联系我们</li>
</ul>
</li>
<li class="parent">新闻动态</li>
<li class="child">
<ul>
<li>公司动态</li>
<li>行业新闻</li>
<li>通知公告</li>
</ul>
</li>
<li class="parent">产品中心</li>
<li class="child">
<ul>
<li>产品列表</li>
<li>产品分类</li>
<li>成功案例</li>
</ul>
</li>
</ul>
</div>

ITPub博客

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

最新文章