单击时保持 bootstrap 手风琴打开

Question

我的 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>

Answer 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>

Answer 2

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

重复

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

Answer 3

可以实现许多 div 个 ID #accordion{{$i}} 每个手风琴只有 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>

单击时保持 bootstrap 手风琴打开

Keep bootstrap accordion open on click

angularjs

twitter-bootstrap

accordion