jQuery很漂亮的手风琴菜单

使用方法：

引入核心CSS样式

/*第一层*/
.menu li.level1>a{ 
  display:block;
  height: 45px;
  line-height: 45px;
  color: #fff;
  padding-left: 50px;
  border-bottom: 1px solid #000; 
  font-size: 16px;
  position: relative;
  transition:all .5s ease 0s;
}
.menu li.level1 a:hover{ text-decoration: none;background-color:#326ea5;   }
.menu li.level1 a.current{ background: #0f4679; }
/*============修饰图标*/
.ico{ width: 20px; height: 20px; display:block;   position: absolute; left: 20px; top: 10px; background-repeat: no-repeat; background-image: url(images/ico1.png); }
/*============小箭头*/
.level1 i{ width: 20px; height: 10px; background-image:url(images/arrow.png); background-repeat: no-repeat; display: block; position: absolute; right: 20px; top: 20px; }
.level1 i.down{ background-position: 0 -10px; }
.ico1{ background-position: 0 0; }
.ico2{ background-position: 0 -20px; }
.ico3{ background-position: 0 -40px; }
.ico4{ background-position: 0 -60px; }
       .ico5{ background-position: 0 -80px; }
/*第二层*/
.menu li ul{ overflow: hidden; }
.menu li ul.level2{ display: none;background: #0f4679;  }
.menu li ul.level2 li a{
  display: block;
  height: 45px;
  line-height: 45px;
  color: #fff;
  text-indent: 60px;
  /*border-bottom: 1px solid #ddd; */
  font-size: 14px;
   transition:all 1s ease 0s;
}

引入jQuery库文件、特效JS文件

<script src="http://www.sucainiu.com/themes/cdn/jquery/jquery-1.10.2.js"></script>
<script src="scripts/easing.js"></script>

初始化、参数配置

//等待dom元素加载完毕.
$(function(){
    $(".treebox .level1>a").click(function(){
        $(this).addClass('current')   //给当前元素添加"current"样式
        .find('i').addClass('down')   //小箭头向下样式
        .parent().next().slideDown('slow','easeOutQuad')  //下一个元素显示
        .parent().siblings().children('a').removeClass('current')//父元素的兄弟元素的子元素去除"current"样式
        .find('i').removeClass('down').parent().next().slideUp('slow','easeOutQuad');//隐藏
         return false; //阻止默认时间
    });
})

HTML结构

<div class="treebox">
    <ul class="menu">
        <li class="level1">
            <a href="#none"><em class="ico ico1"></em>导航一<i class="down"></i></a>
            <ul class="level2">
                <li><a href="javascript:;">导航选项</a></li>
                <li><a href="javascript:;">导航选项</a></li>
                <li><a href="javascript:;">导航选项</a></li>
                <li><a href="javascript:;">导航选项</a></li>
            </ul>
        </li>
        <li class="level1">
            <a href="#none"><em class="ico ico2"></em>导航一<i></i></a>
            <ul class="level2">
                <li><a href="javascript:;">导航选项</a></li>
                <li><a href="javascript:;">导航选项</a></li>
                <li><a href="javascript:;">导航选项</a></li>
                <li><a href="javascript:;">导航选项</a></li>
            </ul>
        </li>
        <li class="level1">
            <a href="#none"><em class="ico ico3"></em>导航一<i></i></a>
            <ul class="level2">
                <li><a href="javascript:;">导航选项</a></li>
                <li><a href="javascript:;">导航选项</a></li>
                <li><a href="javascript:;">导航选项</a></li>
                <li><a href="javascript:;">导航选项</a></li>
            </ul>
        </li>
        <li class="level1">
            <a href="#none"><em class="ico ico4"></em>导航一<i></i></a>
            <ul class="level2">
                <li><a href="javascript:;">导航选项</a></li>
                <li><a href="javascript:;">导航选项</a></li>
                <li><a href="javascript:;">导航选项</a></li>
                <li><a href="javascript:;">导航选项</a></li>
            </ul>
        </li>
                    <li class="level1">
            <a href="#none"><em class="ico ico5"></em>导航一<i></i></a>
            <ul class="level2">
                <li><a href="javascript:;">导航选项</a></li>
                <li><a href="javascript:;">导航选项</a></li>
                <li><a href="javascript:;">导航选项</a></li>
                <li><a href="javascript:;">导航选项</a></li>
            </ul>
        </li>
    </ul>
</div>