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

可以实现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>

单击时保持bootstrap手风琴打开

3 个答案: