jquery实现侧边栏手风琴三级导航菜单
效果图:
引入文件，font-awesome为字体库文件：
<link rel="stylesheet" type="text/css" href="Font-Awesome-3.2.1/css/font-awesome.min.css"><script type="text/javascript" src="jquery-2.1.4.min.js"></script>
css代码：
ul {list-style: none;}.s-side {position: fixed;top: 0;left: 0;width: 230px;bottom: 0;overflow: auto;font-size: 16px;background-color: #7d7472;color: #fff;}.s-side > ul {margin-top: 0;padding-left: 0;}.s-side > ul > li {line-height: 40px;width: 100%;border: 1px solid;}.s-side > ul > li > a > i,.s-side > ul > li > div > i {display: inline-block;width: 40px;text-align: center;}i.icon-chevron-up {float: right;}.iconRotate {transform: rotate(180deg);transition: transform .5s;}.s-firstNav > i.icon-chevron-up {margin-right: 5px;margin-top: 10px;} .s-firstDrop {background-color: #07a3c3;}.s-firstDrop > li {line-height: 33px;border: 1px solid;}.s-firstDrop,.s-secondDrop {display: none;} .s-secondNav > i.icon-chevron-up {margin-right: 18px;margin-top: 12px;} .s-secondDrop {padding-left: 20px;background-color: #decece;}
html代码：
<div class="s-side"><ul><li class="s-firstItem"><a href=""><i class="icon-home"></i><span>一级导航</span></a></li><li><div class="d-firstNav s-firstNav"><i class="icon-tasks"></i><span>一级菜单</span><i class="icon-chevron-up"></i></div><ul class="d-firstDrop s-firstDrop"><li><div class="d-secondNav s-secondNav"><i class="icon-circle"></i><span>二级菜单</span><i class="icon-chevron-up"></i></div><ul class="d-secondDrop s-secondDrop"><li class="s-thirdItem"><a href="">三级导航</a></li><li class="s-thirdItem"><a href="">三级导航</a></li></ul></li><li><div class="d-secondNav s-secondNav"><i class="icon-circle"></i><span>二级菜单</span><i class="icon-chevron-up"></i></div><ul class="d-secondDrop s-secondDrop"><li class="s-thirdItem"><a href="">三级导航</a></li></ul></li><li class="s-secondItem"><a href=""><i class="icon-circle"></i><span>二级导航</span></a></li></ul></li><li><div class="d-firstNav s-firstNav"><i class="icon-bar-chart"></i><span>一级菜单</span><i class="icon-chevron-up"></i></div><ul class="d-firstDrop s-firstDrop"><li class="s-secondItem"><i class="icon-circle"></i><a href="">二级导航</a></li><li class="s-secondItem"><i class="icon-circle"></i><a href="">二级导航</a></li></ul></li></ul></div>
js代码：
$(function() {$('.d-firstNav').click(function() {dropSwift($(this), '.d-firstDrop');});$('.d-secondNav').click(function() {dropSwift($(this), '.d-secondDrop');});/*** @param dom 點擊的當前元素* @param drop 處理的下拉菜單*/function dropSwift(dom, drop) {dom.next().slideToggle();dom.parent().siblings().find('.icon-chevron-up').removeClass('iconRotate');dom.parent().siblings().find(drop).slideUp();var iconChevron = dom.find('.icon-chevron-up');if (iconChevron.hasClass('iconRotate')) {iconChevron.removeClass('iconRotate');} else {iconChevron.addClass('iconRotate');}}})
demo地址：/RidingACodeToStray/jQuery-three-level-accordion-slidebar
