今天用JQuery做了一个折叠的二级菜单,以前直接用的Bootstrap插件来做,Boostrap直接封装好了,拿过来用,这次是自己手写,一边借鉴网上的优秀资源,一边自己做的。自我感觉界面交互良好。原来也没有那么难嘛!
(但是写JS的时候获取二级菜单display属性的时候,得到的结果与实际在页面显示的结果相反,不知道为啥。)
**接下来继续优化,做到三级菜单。
希望能封装成小插件,开始自己的JQuery插件库。**
知识总结:
JQuery
运用了Jquery方法有:
show():元素的显示与隐藏;
addClass():添加一个样式类名;
removeClass();去除一个样式名;
slideToggle();滑动动画显示与隐藏;
siblings();遍历元素并选择;
slideUp();滑动动画向上滑动
具体JQueryAPI中文文档链接:http://www.jquery123.com/
代码展示:
collapse.html:
<!DOCTYPE html>
<html>
<head>
<title>折叠菜单</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="collapse.css">
</head>
<body>
<ul>
<li id="first-floor">
<a href="#" class="first-title">我是一级菜单</a>
<ul id="second-floor">
<li><a href="#" class="second-title">我是二级菜单</a></li>
<li><a href="#" class="second-title">我是二级菜单</a></li>
<li><a href="#" class="second-title">我是二级菜单</a></li>
<li><a href="#" class="second-title">我是二级菜单</a></li>
</ul>
</li>
<li id="first-floor">
<a href="#" class="first-title">我是一级菜单</a>
<ul id="second-floor">
<li><a href="#" class="second-title">我是二级菜单</a></li>
<li><a href="#" class="second-title">我是二级菜单</a></li>
<li><a href="#" class="second-title">我是二级菜单</a></li>
<li><a href="#" class="second-title">我是二级菜单</a></li>
</ul>
</li>
<li id="first-floor">
<a href="#" class="first-title">我是一级菜单</a>
<ul id="second-floor" class="has-children">
<li><a href="#" class="second-title">我是二级菜单</a>
<ul id="third-floor">
<li><a href="#" class="third-title">我是三级菜单</a></li>
<li><a href="#" class="third-title">我是三级菜单</a></li>
<li><a href="#" class="third-title">我是三级菜单</a></li>
</ul>
</li>
<li><a href="#" class="second-title">我是二级菜单</a></li>
<li><a href="#" class="second-title">我是二级菜单</a></li>
<li><a href="#" class="second-title">我是二级菜单</a></li>
</ul>
</li>
</ul>
<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="collapse.js"></script>
</body>
</html>
collapse.css:
html,body,ul,li,h1,h2,h3{
padding: 0;
margin: 0;
}
ul {
list-style: none;
}
a {
text-decoration: none;
}
.first-title {
display: block;
width: 200px;
height: 50px;
line-height: 50px;
text-align: center;
background:#1c4275 url(images/pro_left.png) center right no-repeat;
background-color: #1c4275;
font-size: 18px;
color: #9b5900;
font-weight: 700;
}
.current {
background:#1c4275 url(images/pro_down.png) center right no-repeat;
}
.first-title:hover {
background-color: #0a3775;
color: #fff;
}
#second-floor {
display: none;
}
.second-title {
display: block;
width: 200px;
height: 40px;
line-height: 40px;
text-align: center;
font-size: 16px;
color: #fff;
font-weight: 500;
background-color:#e78300;
}
.second-title:hover {
color: #fff;
background-color: #9222e7;
}
#third-floor {
display: none;
}
.third-title {
display: block;
width: 200px;
height: 30px;
line-height: 30px;
text-align: center;
color: #000;
font-size: 14px;
font-weight: 500;
background-color: #ccc;
}
.third-title:hover {
color:#ff4c98;
background-color: #eee;
}
collapse.js:
$(document).ready(function(){
$("#first-floor #second-floor:eq(0)").show();
$("#first-floor .first-title:eq(0)").addClass("current");
$("#first-floor .first-title").click(function(){
var secondFloor = $(this).next("ul #second-floor");
//为啥跟页面显示情况是相反的display")!="none"???
if (secondFloor.css("display")!="none") {
//console.log("none");
$(this).removeClass("current");
}else{
//console.log("block");
$(this).addClass("current");
}
secondFloor.slideToggle(300).siblings("ul #second-floor").slideUp("slow");
});
})