Bootstrap 手风琴菜单的实现代码
好了，废话不多说了，直接给大家贴代码了，具体代码如下所示：
<!DOCTYPEhtml> <html> <head> <title></title> <metacharset="UTF-8"> <linkrel="stylesheet"href="css/bootstrap.min.css"> <!--可选的Bootstrap主题文件（一般不用引入）--> <linkrel="stylesheet"href="css/bootstrap-theme.min.css"> <!--jQuery文件。务必在bootstrap.min.js之前引入--> <scriptsrc="js/jquery-1.11.1.min.js"></script> <!--最新的Bootstrap核心JavaScript文件--> <scriptsrc="js/bootstrap.min.js"></script> </head> <body> <divstyle="width:200px;"> <divclass="panel-group"id="accordion2"> <divclass="panel-heading"> <strongstyle="font-size:30px;">论坛分类</strong> </div> <divclass="panelpanel-default"> <divclass="panel-heading"data-toggle="collapse" data-parent="#accordion2"href="#collapseOne"> <aclass="accordion-toggle">Java</a> </div> <divid="collapseOne"class="panel-collapsecollapse" style="height:0px;"> <divclass="panel-body"> <ulclass="navnav-pillsnav-stacked"> <li><ahref="#">Java基础</a></li> <li><ahref="#">Java面向对象</a></li> <li><ahref="#">Java核心API</a></li> <li><ahref="#">JavaEE</a></li> </ul> </div> </div> </div> <divclass="panelpanel-default"> <divclass="panel-heading"data-toggle="collapse" data-parent="#accordion2"href="#collapseTwo"> <aclass="accordion-toggle">数据库</a> </div> <divid="collapseTwo"class="panel-collapsecollapse" style="height:0px;"> <divclass="panel-body"> <ulclass="navnav-pillsnav-stacked"> <li><ahref="#">SQL基础</a></li> <li><ahref="#">Oracle</a></li> <li><ahref="#">MySQL</a></li> </ul> </div> </div> </div> <divclass="panelpanel-default"> <divclass="panel-heading"data-toggle="collapse" data-parent="#accordion2"href="#collapseThree"> <aclass="accordion-toggle">技术前沿</a> </div> <divid="collapseThree"class="panel-collapsein" style="height:0px;"> <divclass="panel-body"> <ulclass="navnav-pillsnav-stacked"> <li><ahref="#">NoSQL</a></li> <li><ahref="#">Hadoop</a></li> <li><ahref="#">WebService</a></li> </ul> </div> </div> </div> </div> </div> </body> </html>
以上所述是小编给大家介绍的Bootstrap手风琴菜单的实现代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！