点击时保持引导手风琴打开答案

【问题标题】：Keep bootstrap accordion open on click点击时保持引导手风琴打开
【发布时间】：2015-03-19 19:47:50
【问题描述】：

我们在我的 AngularJS 视图中有以下内容。问题是当用户第二次单击文本框时，它会关闭手风琴，我希望它保持打开状态，直到打开另一个手风琴。

<div class="col-xs-7 panel-group" id="accordion">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="" data-target="#collapseOne" class="collapsed">
                    <input class="form-control" type="text" ng-model="vm.Whatever" placeholder="Whatever">
                </a>
            </h4>
        </div>
        <div id="collapseOne" class="panel-collapse collapse">
            <div class="panel-body">
                lorem ipsum....
            </div>
        </div>
    </div>
</div>

有没有简单的方法来做到这一点？

为了消除混乱，我将其更改为以下内容

<accordion class="col-xs-7 panel-group" id="accordion">
    <accordion-group>
        <accordion-heading>
            <input class="form-control" type="text" ng-model="vm.Whatever" placeholder="Whatever">
        </accordion-heading>
        <div>
            lorem ipsum....
        </div>
    </accordion-group>
</accordion>

【问题讨论】：

为什么这和AngularJS有关？
所以我希望不会收到一堆“在 jquery 中执行此操作”的回复
我不明白...是 angular-ui bootstrap 的手风琴吗？因为你似乎没有使用它
如何在不使用 jQuery 的情况下实例化手风琴？您没有自定义指令。
现在我使用<accordion*> 元素是否更清楚？

标签： angularjs twitter-bootstrap accordion

【解决方案1】：

使用 angular-ui 中的 accordion* 指令，您只能在设置 is-disabled（这里是 src）时阻止切换。但可能更简单的方法是在点击时强制is-open 变量为true：

<accordion-group is-open="openA" ng-click="openA = true">
  <accordion-heading>
    whatever
  </accordion-heading>

</accordion-group>

<accordion-group is-open="openB" ng-click="openB = true">
  <accordion-heading>
    whatever
  </accordion-heading>

</accordion-group>

【讨论】：

这在这里也没有任何效果......它仍然在每次点击时打开和关闭。
我认为问题是我们有 0.10.0
@CaffGeek，对 - 0.10.0 没有 is-disabled。我用什么可能是更好的方法编辑了这个问题
@CaffGeek，这是否解决了您的问题？
可能的话，我周一会回办公室试一试

【解决方案2】：

这可能与How to prevent an angular-bootstrap dropdown from closing (Unbind Event which was bound by a directive) 重复

<accordion-group ng-click="$event.stopPropagation()">

【讨论】：

你为什么要发布一个重复的答案而不是投票关闭问题作为重复？
该更改无效。
也许将ng-click 放在<input> 元素上？

【解决方案3】：

可以实现多个 id 为 #accordion{{$i}} 的 div，每个手风琴只有 1 child 引用其父级 1

    <div class=""
         id="accordion{{$i}}">

        <h3 class="" data-toggle="collapse"
            data-target="#collapse{{$strength->id}}"
            aria-expanded="true"
            aria-controls="collapse{{$strength->id}}" class="mb-0">
            Hai Im the clickable
        </h3>

        <div id="collapse{{$i}}"
             class="collapse"
             aria-labelledby="heading{{$i}}"
             data-parent="#accordion{{$i}}">
            <p>Hai Im the collapsible content</p>
        </div>
    </div>

【讨论】：