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>

此代码可以很好地运行到某一点。第一组始终打开，我隐藏了标题，因此用户无法切换。然而，当第二个手风琴头被关闭时，它打开了。完善。但是现在，我希望它在第二个手风琴关闭时再次打开，这样它们就不能同时关闭。

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

当我点击它时，它开始打开一瞬间然后关闭。我只想找个方法让一个手风琴组关闭另一个。

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

所有我需要看到的是这个plunkr固定，以显示一个手风琴将打开另一个关闭。当一个手风琴关闭时是否不可能打开手风琴？

我甚至尝试将ng-click放回accordion-heading并根据此答案在div的内容周围打accordion-heading标记：Angularjs accordion ng-click on panel-header并且仍然没有取得任何成功。

Answer 1

感谢alienx在这里回答我的问题：How can I disable an accordion-group *after* I open it?

我能够更好地理解如何使用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,
}

在角度手风琴的文档中找到的

并不像以下那样容易操作：

JS

$scope.buildingsOpen = true;

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

作品perfect。

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

当我点击关闭另一个手风琴组时，如何打开一个手风琴组？

1 个答案: