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

问题

Here is my accordion:

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

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.

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?

Thanks.

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.

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

All that I need to see is this plunkr fixed to show that one accordion will open when another closes. Is it not possible to open an accordion when one is closed??

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.

回答1:

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>

For some reason using the status.isFirstOpen code, for example:

$scope.status={
    isFirstOpen:true,
}

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

$scope.buildingsOpen = true;

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

Works perfect.

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

来源：https://stackoverflow.com/questions/30538657/how-can-i-open-one-accordion-group-when-i-click-to-close-another-accordion-group

标签

angularjs

accordion

angular-ui-bootstrap