jQuery简单的垂直手风琴展开收缩效果,本demo是通过样式判断+slideToggle动画滑动效果来实现二级垂直菜单展开收缩动画效果。
<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();
});
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791