我如何在单击关闭另一个 accordion-group 时打开一个 accordion-group？

Question

这是我的手风琴：

<accordion class="m3Details">
    <accordion-group is-open="status.isFirstOpen" is-disabled="status.isFirstDisabled">
      <accordion-heading><span class="noQuery">Building<span class="caret"></span></span></accordion-heading>

        <li ng-repeat="y in m3Info" class="{{y.linkclass}}" ng-if="!y.offsite" ><a href="{{y.link}}" ng-click="clickLinks(y.initialOut,y.initialIn,y.backIn,y.backOut,y.name)"><img src="{{y.icon}}" width="15px" height="15px">{{y.name}}</a></li>

    </accordion-group>

    <accordion-group>
      <accordion-heading ng-click="isFirstOpen=!isFirstOpen"><span>Offsites<span class="caret"></span></span></accordion-heading>

        <li ng-repeat="y in m3Info" class="{{y.linkclass}}" ng-if="y.offsite"><a href="{{y.link}}" ng-click="clickLinks(y.initialOut,y.initialIn,y.backIn,y.backOut,y.name)"><img src="{{y.icon}}" width="15px" height="15px">{{y.name}}</a></li>

    </accordion-group>
</accordion>

这段代码在一定程度上工作得很好。第一组始终打开，我隐藏了 header，因此用户无法切换它。然而，当第二个手风琴 header 关闭时，它打开了。完美的。但是现在，我希望它在第二个手风琴关闭时再次打开，这样它们就不能同时关闭。

我在 ng-click="isFirstOpen=!isFirstOpen" 中添加以尝试完成此操作，因为我发现它是在单击按钮或其他内容时关闭手风琴的解决方案。但是当我把它放在手风琴中时它不起作用。也许我把它放在错误的地方或者以其他方式错误地实施它？也许还有另一种方法？

谢谢。

在这里使用 kjv 的答案 Handle open/collapse events of Accordion in Angular 建议将 ng-click 放在标题内，围绕文本，如下所示：

<accordion-heading><span ng-click="status.isFirstOpen=!status.isFirstOpen">Offsites<span class="caret"></span></span></accordion-heading>

当我点击它时，它开始打开一瞬间然后关闭。我只是在寻找一种方法让一个 accordion-group 关闭打开另一个。

我有一个可以复制我的结果的工作 plunker。 http://plnkr.co/edit/04SZ0T2hHAmuH7o11faH?p=preview

我只需要看到这个 plunkr 固定显示一个手风琴将在另一个关闭时打开。手风琴关了就不能打开了？？

我什至尝试将 ng-click 放回 accordion-heading 并根据此答案在 accordion-heading 的内容周围包装一个 div 标签：Angularjs accordion ng-click on panel-header 仍然没有任何成功。

Answer 1

感谢 alienx 在这里回答我的问题：

我能够更多地了解如何使用 booleans 来操作功能。这是我的问题的解决方案：

HTML

<accordion class="m3Details" close-others="false">
    <accordion-group is-open="buildingsOpen">
        <accordion-heading><span class="noQuery">Building<span class="caret"></span></span></accordion-heading>

            <li ng-repeat="y in m3Info" class="{{y.linkclass}}" ng-if="!y.offsite"><a href="{{y.link}}" ng-click="clickLinks(y.initialOut,y.initialIn,y.backIn,y.backOut,y.name)"><img src="{{y.icon}}" width="15px" height="15px">{{y.name}}</a></li>


    </accordion-group>

    <accordion-group ng-click="runThis()">
        <accordion-heading><span>Offsites<span class="caret"></span></span></accordion-heading>
            <li ng-repeat="y in m3Info" class="{{y.linkclass}}" ng-if="y.offsite"><a href="{{y.link}}" ng-click="clickLinks(y.initialOut,y.initialIn,y.backIn,y.backOut,y.name)"><img src="{{y.icon}}" width="15px" height="15px">{{y.name}}</a></li>

    </accordion-group>

</accordion>

出于某种原因使用 status.isFirstOpen 代码，例如：

$scope.status={
    isFirstOpen:true,
}

在 Angular 手风琴文档中找到的内容不像以下内容那样容易操作：

JS

$scope.buildingsOpen = true;

  $scope.runThis = function() {
    $scope.buildingsOpen=!$scope.buildingsOpen;
}

有效 perfect。

我知道它必须那么简单，也许我没有很好地解释我的问题。

我如何在单击关闭另一个 accordion-group 时打开一个 accordion-group？

How can I open one accordion-group when I click to close another accordion-group?

accordion

angularjs

angular-ui-bootstrap