Question

我正在使用UI-Bootstrap尝试使用手风琴制作页面。我发现这个example对我来说没什么问题。所以我在我的项目中复制了代码，但它不起作用，显然......

我在plunker中创建了这个片段，速度更快debug。

无论如何，这是主要代码：

    <div class="container">
      <div class="row">
        <div class="col-md-8" id="main">
          <h3>Doesn't it look better ?</h3>
          <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">
                  Why is it better
                </a>
                </h4>
              </div>
              <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
                <div class="panel-body">
                  <ul>
                    <li>The titles are block, so you don't have to click the text part to activate it</li>
                    <li>Indicators for expand / collapsing items</li>
                    <li>Removed title links' obnoxious :hover underlinings, and outlines.</li>
                  </ul>
                </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>
        </div>
      </div>
    </div>

你能告诉我它为什么不起作用吗？

谢谢

Answer 1

您在plunker中缺少jquery.js和bootstrap.js。我添加了以下行以使其工作：

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.js"></script>

另外，请注意您的手风琴组件不是ui-bootstrap手风琴。

参见 updated plunker

Answer 2

将数据切换替换为 ng-click ，并在折叠div添加属性 collapse =＆＃34;！collapseOne＆＃34; < / p>

例如

<a role="button" ng-click="collapseOne = !collapseOne" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">

<div id="collapseTwo" collapse="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">

Answer 3

首先，您需要决定是否要使用Angular路线或jQuery路线。在这种情况下不要同时使用两者。 Angular路由使用Angular UI Bootstrap库和ONst Bootstrap CSS文件。 jQuery路由让你使用jQuery（显然），Bootstrap JS库和Bootstrap CSS。

不要把两者混合在一起。如果你发现自己是，那么你做错了。 Here是您的手风琴演示。

为什么这款UI-Bootstrap手风琴不起作用？

3 个答案: