侧导航的手风琴效果是指,点击含子层导航的父导航时,使原本隐藏的子导航显示,再次点击,子层导航又恢复隐藏,同时,同一时间只有一个父导航的子导航能够显示
$("#sidenav > li").find('.sub-nav').hide();
var ico = '<i style="float:right;font-size:12px;" class="glyphicon glyphicon-chevron-down"></i>';
$("#sidenav > li").find('.sub-nav').prev('a').find('span').after(ico);
$('#subnav .sub-nav:eq(0)').attr('id','current');
$('.sub-nav').each(function(){//.sub-nav要设一个#current
$('.sub-nav ul#current').find('span').next('i').attr('class','glyphicon glyphicon-chevron-up');
$(this).parent().children('a').on('click',function(e){
e.preventDefault();
var target = $(this).parent().children('ul');
if ($(this).parent().children('a').find('span').next('i').hasClass('glyphicon glyphicon-chevron-up')) {
target.slideUp();
$(this).parent().children('a').find('span').next('i').removeAttr('class','glyphicon glyphicon-chevron-up');
$(this).parent().children('a').find('span').next('i').attr('class','glyphicon glyphicon-chevron-down');
$('#sidenav ul').removeAttr("id");
} else {
$('#sidenav ul').slideUp();
$('#sidenav ul').removeAttr("id");
$('#sidenav span').next('i').removeAttr('class','glyphicon glyphicon-chevron-up');
$('#sidenav span').next('i').attr('class','glyphicon glyphicon-chevron-down');
$('#sidenav span').prev('i').attr('class',"glyphicon glyphicon-list");
$(this).parent().children('a').find('span').next('i').removeAttr('class','glyphicon glyphicon-chevron-down');
$(this).parent().children('a').find('span').next('i').attr('class','glyphicon glyphicon-chevron-up');
target.slideDown();
$(this).parent("li").children('ul').attr('id','current');
}
});
});
代码相对精悍