最新赞助活动温馨提示:9.9元终身VIP,学生和没有工作的整站资源免费下载!
头像

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

来源:http://www.erdangjiade.com/ 二当家的 2016-08-15 07:24浏览(1639)

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

1、请不要问“在不在”之类的问题,有问题直接问!2、学生或暂时没有工作的童鞋,整站资源免费下载!3、¥9.9充值终身VIP会员,整站资源无任何限制下载!5、程序员加油,交流群:782128964 在线 充值

jQuery蓝色手风琴后台二级菜单导航
分类:导航菜单 > 二级菜单 难易:入门级
查看演示 下载资源: 245

关注微信号获取此Demo视频教程:

下载资源 下载积分: 0 积分
<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();
});
1 2