Question

 <li class="panel panel-default dropdown organization">
  <a data-toggle="collapse" href="#dropdown-reg">
    <span class="icon fa fa-plus"></span><span class="title">Add                    Masters</span>
  </a>
  <div id="dropdown-reg" class="panel-collapse collapse">
    <div class="panel-body">
      <ul class="nav navbar-nav">
        <li>
          <a href="#"><span class="icon fa fa-tasks"></span>Add         Claim</a>
        </li>
        <li class="panel panel-default dropdown organization">
          <a data-toggle="collapse" data-target="#dropdown-reg1">
            <span class="icon fa fa-tasks"></span><span class="title">Add Policy</span>
          </a>
          <div id="dropdown-reg1" class="panel-collapse collapse">
            <div class="panel-body">
              <ul class="nav navbar-nav">
                <li><a href="${path}/master/policy/addpolicycovertypes">Cover Type</a></li>
                <li><a href="${path}/master/policy/addpolicycoverterms">Cover Terms</a></li>
                <li><a href="${path}/master/policy/addpolicynature">Nature</a></li>
                <li><a href="${path}/master/policy/addconveyance">Conveyance</a></li>
                <li><a href="${path}/master/policy/addpackage">Package</a></li>
              </ul>
            </div>
          </div>
        </li>
        <li class="groupsActive"><a href="#">Upcoming</a></li>
      </ul>
    </div>
  </div>
</li>

扩展添加策略列表时，它无效。

Answer 1

一切都很棒，只需点击here (bootply)即可。

另外，请确保您自己正确导入了所有引导程序库，就像haxxxton所说的那样，确保您还包含来自bootstrap的最新js和css。

实际上，在头部你可以导入bootstrap css库并在页脚中（就在封闭的body标签</body>之前），不要忘记导入jQuery和Bootstrap Javascript库（放jQuery）在Bootstrap之前），就像这样：

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        <title>SO</title>
    </head>
    <body>
    <div >
        <li class="panel panel-default dropdown organization">
            <a data-toggle="collapse" href="#dropdown-reg">
                <span class="icon fa fa-plus"></span><span class="title">Add                    Masters</span>
            </a>
            <div id="dropdown-reg" class="panel-collapse collapse">
                <div class="panel-body">
                    <ul class="nav navbar-nav">
                        <li>
                            <a href="#"><span class="icon fa fa-tasks"></span>Add         Claim</a>
                        </li>
                        <li class="panel panel-default dropdown organization">
                            <a data-toggle="collapse" data-target="#dropdown-reg1">
                                <span class="icon fa fa-tasks"></span><span class="title">Add Policy</span>
                            </a>
                            <div id="dropdown-reg1" class="panel-collapse collapse">
                                <div class="panel-body">
                                    <ul class="nav navbar-nav">
                                        <li><a href="${path}/master/policy/addpolicycovertypes">Cover Type</a></li>
                                        <li><a href="${path}/master/policy/addpolicycoverterms">Cover Terms</a></li>
                                        <li><a href="${path}/master/policy/addpolicynature">Nature</a></li>
                                        <li><a href="${path}/master/policy/addconveyance">Conveyance</a></li>
                                        <li><a href="${path}/master/policy/addpackage">Package</a></li>
                                    </ul>
                                </div>
                            </div>
                        </li>
                        <li class="groupsActive"><a href="#">Upcoming</a></li>
                    </ul>
                </div>
            </div>
        </li>
    </div>
  </div>
    <script
            src="https://code.jquery.com/jquery-3.1.1.min.js"
            integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
            crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

    </body>
    </html>

Answer 2

这是适合你的工作。

<div class="container">
<div class="row">
    <div class="col-md-12">
        <div class="panel panel-default">
            <div class="panel-heading" role="tab" id="headingOne">
                <h4 class="panel-title">
                    <a role="button" data-toggle="collapse" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
                        <span class="icon fa fa-plus"></span><span class="title"> Add Masters</span>
                    </a>
                </h4>
            </div>
            <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
                <div class="panel-body">
                    <ul class="nav navbar-nav">
                        <li><a href="#"><span class="icon fa fa-tasks"></span> Add Claim</a></li>
                        <li>
                            <a role="button" data-toggle="collapse" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                                <span class="icon fa fa-tasks"></span> Add Policy
                            </a>
                            <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
                                <div class="panel-body">
                                    <ul class="nav navbar-nav">
                                        <li><a href="${path}/master/policy/addpolicycovertypes">Cover Type</a></li>
                                        <li><a href="${path}/master/policy/addpolicycoverterms">Cover Terms</a></li>
                                        <li><a href="${path}/master/policy/addpolicynature">Nature</a></li>
                                        <li><a href="${path}/master/policy/addconveyance">Conveyance</a></li>
                                        <li><a href="${path}/master/policy/addpackage">Package</a></li>
                                    </ul>
                                </div>
                            </div>

                        </li>
                        <li><a href="#"> Upcoming</a></li>
                    </ul>
                </div>
            </div>
    </div>
</div>

JsFiddle Link to Working Demo

Bootstrap列表没有折叠

2 个答案: