如何在AngularJS中打開另一個手風琴時關閉AngularJS手風琴

Question

我正在使用AngularJS手風琴。當我使用多個手風琴狀手風琴1，手風琴-2，手風琴3，我點擊第一個手風琴，手風琴打開，如果我點擊第二個手風琴，第2折皺也打開。 我的問題是：如何確保當我打開第一個手風琴時，其他手風琴再次關閉？

這裏是我的代碼

<div> 
    <button class="accordion"><b>Mens</b> 
    </button> 
    <div class="panel"> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
    </div> 
    <button class="accordion"><b>Womens</b> 
    </button> 
    <div class="panel"> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
    </div> 
    <button class="accordion"><b>Kids</b> 
    </button> 
    <div class="panel"> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
    </div> 

</div> 

這裏是我的CSS樣式

button.accordion { 
     background-color: #e6e6e6; 
     color: #444; 
     cursor: pointer; 
     padding: 11px; 
     width: 100%; 
     border: none; 
     text-align: left; 
     outline: none; 
     font-size: 12px; 
     transition: 0.4s; 
     border-left: 5px solid #4d4dff; 
    } 

    button.accordion.active, 
    button.accordion:hover { 
     background-color: #d9d9d9; 
    } 

    div.panel { 
     padding: 0 18px; 
     background-color: #f2f2f2; 
     max-height: 0; 
     overflow: hidden; 
     transition: 0.6s ease-in-out; 
     opacity: 0; 
     margin-bottom: 8px; 
    } 

    div.panel.show { 
     opacity: 1; 
     max-height: 500px; 
    } 

Answer 1

由於您使用的角度，可能會更易於使用的角度UI引導來實現這一目標。有手風琴一個指令，你可以使用這樣的：

<uib-accordion close-others="oneAtATime"> 
    <div uib-accordion-group class="panel-default" heading=""> 
     This content is straight in the template. 
    </div> 
    <div uib-accordion-group class="panel-default" heading="Women"> 
     This content is straight in the template. 
    </div> 
    <div uib-accordion-group class="panel-default" heading="Kids"> 
     This content is straight in the template. 
    </div> 
</uib-accordion> 

，然後你將有一個控制器，它看起來是這樣的：

angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']); 
angular.module('ui.bootstrap.demo').controller('AccordionDemoCtrl', function ($scope) { 
    $scope.oneAtATime = true; 
}); 

我把這個幾乎直接從文檔其中您可以查看這裏：

https://angular-ui.github.io/bootstrap/

有很多的配置這些手風琴但一個，你將b選最感興趣的是我正在傳遞給手風琴的其他近距離選項。你會注意到$ scope上有一個布爾值，其值爲true。這導致其他面板在打開時崩潰。