摘要：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" id="ulmenu"> <li> <a>开发语言</a> <ul class="submenu"> <li><a onclick="changeStyle(1);" sysId="1" href="#" >Java</a></li> <li><a onclick="changeStyle(2);" sysId="2" href="#" >NET</a></li> <li><a onclick="changeStyle(3);" sysId="3" href="#" >VB</a></li> <li><a onclick="changeStyle(4);" sysId="4" href="#" >C++</a></li> </ul> </li> <li> <a>集成开发环境</a> <ul class="submenu"> <li><a onclick="changeStyle(5);" sysId="5" href="#" >WebStrom</a></li> <li><a onclick="changeStyle(6);" sysId="6" href="#" >Visual studio</a></li> </ul> </li> <li> <a>脚本语言</a> <ul class="submenu"> <li><a onclick="changeStyle(7);" sysId="7" href="#">Javascript</a></li> <li><a onclick="changeStyle(8);" sysId="8" 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方法。