在AngularJS中打开另一个手风琴时如何关闭AngularJS手风琴答案

【问题标题】：How to close a AngularJS accordion when another accordion is opened in AngularJS在AngularJS中打开另一个手风琴时如何关闭AngularJS手风琴
【发布时间】：2016-07-22 21:59:12
【问题描述】：

我正在使用 AngularJS 手风琴。当我使用 accordion-1、accordion-2、accordion-3 等多个手风琴时，我点击了第一个手风琴，即手风琴打开，如果我点击第二个手风琴，第二个手风琴也会打开。我的问题是：如何确保当我打开第一个手风琴时，其他手风琴会再次关闭？

这是我的代码

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

【问题讨论】：

标签： javascript css angularjs twitter-bootstrap

【解决方案1】：

由于您使用的是 angular，因此使用 angular ui bootstrap 来实现这一点可能更容易。您可以像这样使用手风琴指令：

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

有很多选项可以配置这些手风琴，但您最感兴趣的是我传递给手风琴的 close-others 选项。您会注意到 $scope 上有一个值为 true 的布尔值。这会导致其他面板在打开时折叠。

【讨论】：