您的位置:首页 > Web前端 > BootStrap

侧面导航栏,bootstrap+jquery,收放功能

2017-05-24 18:57 281 查看
实现效果:



【一】点击计算机,展示台式机,笔记本,掌上电脑,且向右标记变为向下

【二】再点计算机,收回子项,向下标记变为向右

页面代码:

<div class="panel panel-primary">
<div class="panel-heading">商品分类</div>
<div>
<nav>
<ul class="nav nav-pills nav-stacked">
<li><a href="" class="glyphicon glyphicon-menu-right inactive"> 计算机</a>
<ul style="display: none" class="nav nav-pills nav-stacked">
<li><a href="" class="glyphicon glyphicon-menu-right"> -- 台式机</a></li>
<li><a href="" class="glyphicon glyphicon-menu-right"> -- 笔记本</a></li>
<li><a href="" class="glyphicon glyphicon-menu-right"> -- 掌上电脑</a></li>
</ul>
</li>
<li><a href="" class="glyphicon glyphicon-menu-right inactive"> 数码产品</a>
<ul style="display: none" class="nav nav-pills nav-stacked">
<li><a href="" class="glyphicon glyphicon-menu-right"> -- 数码照相机</a></li>
<li><a href="" class="glyphicon glyphicon-menu-right"> -- 数码摄像机</a></li>
</ul>
</li>
</ul>
</nav>
</div>
</div>

jquery
$('.inactive').click(function(e){
e.preventDefault();
if($(this).siblings('ul').css('display')=='none'){//下拉
$(this).removeClass('glyphicon-menu-right');
$(this).addClass('glyphicon-menu-down');
$(this).siblings('ul').slideDown(100).children('li');
}else{//回收
$(this).removeClass('glyphicon-menu-down');
$(this).addClass('glyphicon-menu-right');
$(this).siblings('ul').slideUp(100);
}
});
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: