jquery垂直展开折叠手风琴二级菜单
摘要：jquery实现垂直展开二级菜单
最近新开发一个简单项目，用到左侧两级的菜单。找找了手头的文件，竟然没有现成的代码，算了，去网上找找整理下吧。
注：jquery-1.8.3.min.js需要下载文件放到同级名为js的文件夹里。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jquery垂直展开折叠手风琴效果</title>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<style type="text/css">
body {
margin: 0px;
padding: 0px;
font-family: "微软雅黑";
font-size: 12px;
}
div, ul, li, ol, dl, dt, dd, img, p, h1, h2, h3, p, table, td, th {
margin: 0px;
padding: 0px;
list-style-type: none;
border: 0;
}
a {
text-decoration: none;
}
/* 侧导航 */
.menu {
width: 195px;
background-color: #cfe5ec;
}
.menu ul {
width: 195px;
padding-top: 5px;
}
.menu li {
background: #3E8ED5;
line-height: 30px;
color: #4f4f4f;
display: block;
text-indent: 3em;
margin-top: 1px;
}
.menu li a {
height: 30px;
display: block;
color: white;
}
.menu li a:hover {
height: 30px;
display: block;
color: #4f4f4f;
}
.cur {
background: #2668cb;
font-weight: bold;
}
.submenu {
font-size: 12px;
}
.submenu li {
height:30px;
line-height:30px;
background: #48A1F0;
}
.submenu a {
display: block;
text-decoration: none;
color: #d9d9d9;
-webkit-transition: all 0.25s ease;
-o-transition: all 0.25s ease;
transition: all 0.25s ease;
}
.submenu a:hover {
background: #2668cb;
color: #FFF;
}
</style>
</head>
<body>
<div>
<ul class="menu" >
<li>
<a>开发语言</a>
<ul class="submenu">
<li><a onclick="changeStyle(1);" sys href="#" >Java</a></li>
<li><a onclick="changeStyle(2);" sys href="#" >NET</a></li>
<li><a onclick="changeStyle(3);" sys href="#" >VB</a></li>
<li><a onclick="changeStyle(4);" sys href="#" >C++</a></li>
</ul>
</li>
<li>
<a>集成开发环境</a>
<ul class="submenu">
<li><a onclick="changeStyle(5);" sys href="#" >WebStrom</a></li>
<li><a onclick="changeStyle(6);" sys href="#" >Visual studio</a></li>
</ul>
</li>
<li>
<a>脚本语言</a>
<ul class="submenu">
<li><a onclick="changeStyle(7);" sys href="#">Javascript</a></li>
<li><a onclick="changeStyle(8);" sys href="#">Python</a></li>
</ul>
</li>
</ul>
</div>
</body>
<script type="text/javascript">
$(function () {
$('.menu li > .submenu').slideUp('normal');//通过使用滑动效果，隐藏被选元素，如果元素已显示出来的话
var accordion_head = $('.menu > li > a'),
accordion_body = $('.menu li > .submenu');
//accordion_head.first().addClass('active').next().slideDown('normal');这行代码设置页面打开时展开第一个菜单
accordion_head.on('click', function (event) {
event.preventDefault();//preventDefault() 方法阻止元素发生默认的行为
if ($(this).attr('class') != 'active') {
accordion_body.slideUp('normal');
$(this).next().stop(true, true).slideToggle('normal');
//获取.menu > li > a > 点击元素的同级的下个元素>停止所有在该元素上正在运行的动画>通过使用滑动效果在显示和隐藏状态之间切换元素
accordion_head.removeClass('active');
$(this).addClass('active');
}
else {
accordion_body.slideUp('normal');
$(this).removeClass('active');
}
});
});
function changeStyle(obj) {
$(".submenu a").each(function () {
if (obj == $(this).attr("sysId")) {
$(this).addClass('cur');
} else {
$(this).removeClass('cur');
}
});
}
</script>
</html>样式active用来标记当前哪个元素是展开状态,主要用到jQuery里的slideUp和 slideToggle方法。
- 上一篇 »CSS垂直树形下拉菜单
- 下一篇 »10款最新CSS3/jQuery菜单导航插件