如何在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。这导致其他面板在打开时崩溃。