实现效果:
【一】点击计算机,展示台式机,笔记本,掌上电脑,且向右标记变为向下
【二】再点计算机,收回子项,向下标记变为向右
页面代码:
<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);
}
});