jQuery蓝色手风琴后台二级菜单导航

jQuery简单的垂直手风琴展开收缩效果，本demo是通过样式判断+slideToggle动画滑动效果来实现二级垂直菜单展开收缩动画效果。

分类：导航菜单 > 二级菜单难易：入门级

查看演示下载资源下载积分： 20 积分

<li>
    <div class="header">
        <span class="label" style="background-image:url(images/messages.png);">Messages</span>
        <span class="arrow up"></span>
    </div>
    <ul class="menu" style="display:block;">
        <li>Notification Settings</li>
        <li class="selected">Email Alerts</li>
        <li>Privacy Settings</li>
    </ul>
</li>
<li>
    <div class="header">
        <span class="label" style="background-image:url(images/user.png);">User Controls</span>
        <span class="arrow up"></span>
    </div>
    <ul class="menu" style="display:block;">
        <li><input type="range" name="range" min="0" max="100" value="35" style="width:100%;" /></li>
    </ul>
</li>

/* 滑动/展开 */
$("ul.expmenu li > div.header").click(function() {
    var arrow = $(this).find("span.arrow");
    if (arrow.hasClass("up")) {
        arrow.removeClass("up");
        arrow.addClass("down");
    } else if (arrow.hasClass("down")) {
        arrow.removeClass("down");
        arrow.addClass("up");
    }
    $(this).parent().find("ul.menu").slideToggle();
});