当前位置： 移动技术网 > IT编程>开发语言>JavaScript > Bootstrap 手风琴菜单的实现代码

Bootstrap 手风琴菜单的实现代码

2019年03月29日  | 移动技术网IT编程  | 我要评论

好了，废话不多说了，直接给大家贴代码了，具体代码如下所示：

<!doctype html>
<html>
<head>
  <title></title>
  <meta charset="utf-8"> 
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- 可选的bootstrap主题文件（一般不用引入） -->
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<!-- jquery文件。务必在bootstrap.min.js 之前引入 -->
<script src="js/jquery-1.11.1.min.js"></script>
<!-- 最新的 bootstrap 核心 javascript 文件 -->
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div style="width: 200px;">
      <div class="panel-group" id="accordion2">
      <div class="panel-heading">
        <strong style="font-size: 30px;">论坛分类</strong>
      </div>
        <div class="panel panel-default">
          <div class="panel-heading" data-toggle="collapse"
            data-parent="#accordion2" href="#collapseone">
            <a class="accordion-toggle">java</a>
          </div>
          <div id="collapseone" class="panel-collapse collapse"
            style="height: 0px;">
            <div class="panel-body">
              <ul class="nav nav-pills nav-stacked">
                <li><a href="#">java基础</a></li>
                <li><a href="#">java面向对象</a></li>
                <li><a href="#">java核心api</a></li>
                <li><a href="#">javaee</a></li>
              </ul>
            </div>
          </div>
        </div>
        <div class="panel panel-default">
          <div class="panel-heading" data-toggle="collapse"
            data-parent="#accordion2" href="#collapsetwo">
            <a class="accordion-toggle">数据库</a>
          </div>
          <div id="collapsetwo" class="panel-collapse collapse"
            style="height: 0px;">
            <div class="panel-body">
              <ul class="nav nav-pills nav-stacked">
                <li><a href="#">sql基础</a></li>
                <li><a href="#">oracle</a></li>
                <li><a href="#">mysql</a></li>
              </ul>
            </div>
          </div>
        </div>
        <div class="panel panel-default">
          <div class="panel-heading" data-toggle="collapse"
            data-parent="#accordion2" href="#collapsethree">
            <a class="accordion-toggle">技术前沿</a>
          </div>
          <div id="collapsethree" class="panel-collapse in"
            style="height: 0px;">
            <div class="panel-body">
              <ul class="nav nav-pills nav-stacked">
                <li><a href="#">nosql</a></li>
                <li><a href="#">hadoop</a></li>
                <li><a href="#">webservice</a></li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
</body>
</html>

以上所述是小编给大家介绍的bootstrap 手风琴菜单的实现代码，希望对大家有所帮助

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网