我怎样才能开立一个手风琴组，当我点击关闭另一个手风琴组？ [英] How can I open one accordion-group when I click to close another accordion-group?

问题描述

下面是我的手风琴：

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

这code精美的作品达到一定的点。第一组始终是敞开的，我有头部隐藏所以它不能由用户进行切换。然而，它打开了，当第二个手风琴头被关闭。完善。但现在，我希望在第二届手风琴关闭它再次打开，让他们不能同时关闭在同一时间。

This code works beautifully up to a certain point. The first group is always open and I have the header hidden so it cannot be toggled by the user. It opened, however, when the 2nd accordion header is closed. Perfect. But now, I want it to open again when the 2nd accordion is closed, so that they cannot be both closed at the same time.

我在添加纳克点击=isFirstOpen =！isFirstOpen在试图做到这一点，因为我发现它作为解决关闭一个手风琴当按钮还是其他什么东西被点击。但是，当我把它放在我的手风琴它不工作。也许我把它在错误的地方或以其他方式实现它错了吗？或许有另一种方法？

I added in the ng-click="isFirstOpen=!isFirstOpen" in attempt to accomplish this as I have found it as a solution to closing an accordion when a button or something else is clicked. But it's not working when I put it in my accordion. Maybe I am putting it in wrong place or otherwise implementing it wrong? Perhaps there is another approach?

感谢。

在这里<一个利用KJV答案href=\"http://stackoverflow.com/questions/15642082/handle-open-collapse-events-of-accordion-in-angular\">Handle标题里面角那里有人建议把手风琴的打开/关闭事件NG单击，周围像这样的文字：

Using the answer by kjv here Handle open/collapse events of Accordion in Angular where it was suggested to put the ng-click inside the heading, around the text like so:

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

当我点击它，它开始打开的一瞬间，然后关闭。我只是在寻找一种方式有一个手风琴组关闭打开另一个。

When I click it, it starts to open for a split second and then closes. I am simply looking for a way to have one accordion-group closing open another.

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

I have a working plunker that replicates my results. http://plnkr.co/edit/04SZ0T2hHAmuH7o11faH?p=preview

所有我需要看到的是这个plunkr固定表明，一个手风琴将打开另一个关闭时。它是无法打开手风琴当一个被关闭??

我甚至试图把NG单击早在手风琴标题和包扎 DIV 标签围绕手风琴标题的内容，按照这样的回答：<一href=\"http://stackoverflow.com/questions/23135832/angularjs-accordion-ng-click-on-panel-header\">Angularjs在面板头手风琴NG单击，仍然没有成功。

I have even tried to put the ng-click back in the accordion-heading and wrap a div tag around the content of accordion-heading according to this answer: Angularjs accordion ng-click on panel-header and still have not had any success.

推荐答案

由于alienx的答案在这里我的问题：<一href=\"http://stackoverflow.com/questions/30716402/how-can-i-disable-an-accordion-group-after-i-open-it\">How我可以禁用手风琴组* *后我打开它？

Thanks to alienx's answer to my question here: How can I disable an accordion-group *after* I open it?

我能够了解更多关于如何使用布尔值操控功能。这里的解决方案我的问题：

I was able to understand more of how to use booleans to manipulate functionality. Here is the solution to my question:

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 code，例如：

$scope.status={
    isFirstOpen:true,
}

这是在角手风琴的文档中发现了不容易操作如下：

that is found in the docs of the Angular Accordion weren't as easily manipulated as the following:

JS

$scope.buildingsOpen = true;

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

的完美的。

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

I knew it had to be that simple, maybe I didn't explain my question very well.

这篇关于我怎样才能开立一个手风琴组，当我点击关闭另一个手风琴组？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！