手风琴布局

       使用div+span+css样式可以做出任何样式，但是为了规范符合标准代码，网页布局应该斟酌考虑使用什么标签才会完美。下面完成一个下拉列表布局。

        说明：使用有序列表或者无序列表完成，样式骨架如下：

		<ul class="nav">
			<li class="nav-li">   <!--包含大标题和大标题下的内容-->
				<a href="##" class="btn" >    <!--大标题-->
					<span class="glyphicon glyphicon-home"></span>
					<span>新闻管理</span>
					<span class="glyphicon glyphicon-triangle-bottom"></span>
				</a>
				<ul class="_nav">        <!--大标题下的小标题-->
					<li>
						<span class="glyphicon glyphicon-folder-close"></span>
						<span>新闻视频管理</span>
					</li>
					<li>
						<span class="glyphicon glyphicon-folder-close"></span>
						<span>新闻频道管理</span>
					</li>
					<li>
						<span class="glyphicon glyphicon-folder-close"></span>
						<span>地方新闻管理</span>
					</li>
					<li>
						<span class="glyphicon glyphicon-folder-close"></span>
						<span>自定义设置</span>
					</li>
				</ul>
			</li>

			<li class="nav-li">
				<a href="##" class="btn">
					<span class="glyphicon glyphicon-user"></span>
					<span>用户信息设置</span>
					<span class="glyphicon glyphicon-triangle-bottom"></span>
				</a>
				<ul class="_nav">
					<li>
						<span class="glyphicon glyphicon-folder-close"></span>
						<span>首页</span>
					</li>
					<li>
						<span class="glyphicon glyphicon-folder-close"></span>
						<span>表单</span>
					</li>
					<li>
						<span class="glyphicon glyphicon-folder-close"></span>
						<span>表格</span>
					</li>
					<li>
						<span class="glyphicon glyphicon-folder-close"></span>
						<span>自定义设置2</span>
					</li>
				</ul>
			</li>
			<li class="nav-li">
				<a href="##" class="btn">
					<span class="glyphicon glyphicon-phone-alt"></span>
					<span class="">工作安排</span>
					<span class="glyphicon glyphicon-triangle-bottom"></span>
				</a>
				<ul class="_nav">
					<li>
						<span class="glyphicon glyphicon-folder-close"></span>
						<span>工作安排查询1</span>
					</li>
					<li>
						<span class="glyphicon glyphicon-folder-close"></span>
						<span>安排管理1</span>
					</li>
					<li>
						<span class="glyphicon glyphicon-folder-close"></span>
						<span>类型选择1</span>
					</li>
				</ul>
			</li>
			<li class="nav-li">
				<a href="##" class="btn">
					<span class="glyphicon glyphicon-tree-deciduous"></span>
					<span class="">数据管理</span>
					<span class="glyphicon glyphicon-triangle-bottom"></span>
				</a>
				<ul class="_nav">
					<li>
						<span class="glyphicon glyphicon-folder-close"></span>
						<span>工作安排查询2</span>
					</li>
					<li>
						<span class="glyphicon glyphicon-folder-close"></span>
						<span>安排管理2</span>
					</li>
					<li>
						<span class="glyphicon glyphicon-folder-close"></span>
						<span>类型选择2</span>
					</li>
				</ul>
			</li>
		</ul>

 切换大标题，小标题的显示与隐藏

var length=$(".btn").length;
$(".btn").on('click',function(){
$("._nav").hide();
for(var i=0;i<length;i++){
	$($($(".btn")[i]).children().eq(2)).attr({"class":"glyphicon glyphicon-triangle-bottom"});
}
	if($(this).attr("class")=="btn"){
		$(".btn").removeClass("show");
		$(this).addClass("show");
		$($(".show").children().eq(2)).attr({"class":"glyphicon glyphicon-chevron-up"});
		$($(".show").next()).show();
	}else{
		$($(".show").children().eq(2)).attr({"class":"glyphicon glyphicon-triangle-bottom"});
		$($(".show").next()).hide();
		$(this).removeClass("show");
	}

})

看看封装好的模板，学习大牛布局，力争做到精确极致
参考位置：https://github.com/yijianchuanxinwq/select.git