官网的例子：
http://v3.bootcss.com/javascript/#collapse
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingOne"> <h4 class="panel-title"> <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> Collapsible Group Item #1 </a> </h4> </div> <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne"> <div class="panel-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingTwo"> <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> Collapsible Group Item #2 </a> </h4> </div> <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo"> <div class="panel-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingThree"> <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> Collapsible Group Item #3 </a> </h4> </div> <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree"> <div class="panel-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. </div> </div> </div> </div>
官网的效果：
自己根据这个折叠组件写的：--看折叠组件部分的代码就好了。
<!doctype html> <html> <head> <meta charset="utf-8"> <title>导航测试</title> <link rel="stylesheet" type="text/css" href="bootstrap/bootstrap.min.css"> <style type="text/css"> .navbar-inverse .navbar-header .active{ background-color: #31708f; } .navbar-inverse .navbar-brand { color: #fff; cursor: pointer; padding: 15px 25px; font-size: 14px; } .navbar-inverse { background-color: #337ab7; border-color: #337ab7; } .navbar-inverse .navbar-nav>li>a { color: #fff; } .navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.active>a:focus, .navbar-inverse .navbar-nav>.active>a:hover{ color: #fff; background-color: #31708f; } .navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:focus, .navbar-inverse .navbar-nav>.open>a:hover{ color: #fff; background-color: #337ab7; } input#sw{ font-style: italic; color: #aaa; } .navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form{ border-color: #337ab7; } @media (max- 767px){ .navbar-inverse .navbar-nav .open .dropdown-menu .divider{ background-color: rgba(0,0,0,.075); } } /* 产品分类 */ ul.product_category li { float: left; list-style: none; } ul.product_category { padding: 0; } .product_category >li{ padding: 5px 25px; } .product_category >li.active{ background: #ccc; } /* 手机版产品分类导航 */ ul.product_category_mobile>li { padding: 5px 0; width: 33.3%; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .product_category_mobile{ padding: 0; } #accordion .category_arrow{ float: right; padding: 0 10px; } .panel-heading>li{ float: left; list-style: none; } @media (max- 767px){ .pc{ display: none; } .mobile{ display: block; } } @media(min- 768px){ .pc{ display: block; } .mobile{ display: none; } } </style> </head> <body> <div class="container"> <div class="row"> <nav class="navbar navbar-inverse"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand active" onclick="alert('all')">全部</a> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">按场景选择 <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">全部</a></li> <li role="separator" class="divider"></li> <li><a href="#">规划</a></li> <li><a href="#">实施</a></li> <li><a href="#">维护</a></li> </ul> </li> <li class="active"><a href="#">我的收藏</a></li> <li><a href="#">最近浏览</a></li> </ul> <form class="navbar-form navbar-right"> <div class="input-group"> <input id="sw" type="text" class="form-control" value="请输入关键字(名称/描述)"> <span class="input-group-btn"> <button class="btn btn-default" type="button">搜索</button> </span> </div> <!-- <div class="form-group"> <input id="sw" type="text" class="form-control" value="请输入关键字(名称/描述)"> </div> <input type="button" class="btn btn-default" value="搜索"/> --> </form> </div> </nav> </div> <!-- 产品分类 --> <div class="row pc"> <ul class="product_category 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="#">WLAN</a></li> <li><a href="#">SDN控制器</a></li> <li><a href="#">无线局域网</a></li> </ul> </div> <!-- 手机端产品分类展示 --> <div class="row mobile"> <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> <div class="panel"> <div class="panel-heading clearfix" role="tab"> <li><a href="#">所有产品</a></li> <a class="category_arrow" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true"> <span class="glyphicon glyphicon-menu-down"></span> </a> </div> <div id="collapseOne" class="panel-collapse collapse" role="tabpanel"> <div class="panel-body"> <ul class="product_category product_category_mobile clearfix"> <li class="active"><a href="#">交换机</a></li> <li><a href="#">路由器</a></li> <li><a href="#">传送网</a></li> <li><a href="#">WLAN</a></li> <li><a href="#">SDN控制器</a></li> <li><a href="#">无线局域网无线局域网无线局域网</a></li> </ul> </div> </div> </div> </div> </div> </div> </body> <script src="jquery/jquery.min.js"></script> <script src="bootstrap/bootstrap.min.js"></script> <script type="text/javascript"> </script> </html>
