<div class="bs-filter">
					<div class="filter-row">
						<ul class="fil-link clearfix">
							<li class="active"><a href="">全部</a></li>
							<li><a href="">图书出版</a></li>
							<li><a href="">期刊出版</a></li>
							<li><a href="">国际出版</a></li>
						</ul>
					</div>
					<div class="filter-row">
						<ul class="fil-link clearfix">
							<li ><a href="">全部</a></li>
							<li class="active"><a href="">纸质书</a></li>
							<li><a href="">电子书</a></li>
							<li><a href="">有声书</a></li>
						</ul>
					</div>
					<div class="filter-row filter-has-more">
						<ul class="fil-link clearfix">
							<li ><a href="">全部</a></li>
							<li class="active"><a href="">领袖著作</a></li>
							<li><a href="">重要文献</a></li>
							<li><a href="">马列主义</a></li>
							<li><a href="">国际共运</a></li>
							<li><a href="">四史</a></li>
							<li><a href="">世界政党</a></li>
							<li><a href="">哲学社科</a></li>
							<li><a href="">文学艺术</a></li>
							<li><a href="">少儿读物</a></li>
							<li><a href="">生活健康</a></li>
							<li><a href="">新书速览</a></li>
							<li><a href="">目录下载</a></li>
							<li><a href="">国际共运</a></li>
							<li><a href="">四史</a></li>
							<li><a href="">世界政党</a></li>
							<li><a href="">哲学社科</a></li>
							<li><a href="">文学艺术</a></li>
							<li><a href="">少儿读物</a></li>
							<li><a href="">生活健康</a></li>
							<li><a href="">新书速览</a></li>
							<li><a href="">目录下载</a></li>
						</ul>
						<div class="filter-toggle">
							<span class="fa fa-angle-down"></span><span class="text">展开</span>
						</div>
					</div>

<script type="text/javascript">
					var lis = $('.filter-has-more .fil-link li:gt(12)')
					var liall = $('.filter-has-more .fil-link li')
					lis.hide()
					$('.filter-toggle').click(function(){
						if($(this).hasClass('on')){
							$(this).removeClass('on')
							$(this).find('.text').text('展开')
							lis.hide()
						}else{
							$(this).addClass('on')
							liall.show()
							$(this).find('.text').text('收起')
						}
					})
					
					
				</script>

/* 图书出版 */
.bs-filter{
	background-color: #FFF;
	padding: 10px 15px;
	border-radius: 6px;
	margin-bottom: 30px;
}
.filter-row{
	position: relative;
	padding: 5px 0;
}
.fil-link li{
	float: left;
	padding:2px 5px;
}
.fil-link li a{
	display: inline-block;
	height: 32px;
	line-height: 30px;
	padding: 0 11px;
	border-radius: 20px;
	color: #333;
	border: 1px solid #fff;
}
.fil-link li.active a{
	color: #90080e;
	border: 1px solid #90080e;
}
.filter-has-more{
	padding-right: 40px;
}
.filter-toggle{
	color: #999999;
	position: absolute;
	right: 0;
	top: 0;
	padding: 12px 0;
	cursor: pointer;
}
.filter-toggle span{
	display: inline-block;
	vertical-align: middle;
}
.filter-toggle.on .fa{
	transform: rotateZ(180deg);
}