javascript - 在 AngularJS 中打开另一个 Accordion 时如何关闭 AngularJS Accordion

Question

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

这是我的代码

 <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

由于您使用的是 angular，因此使用 angular ui bootstrap 可能更容易实现这一点。 Accordion 有一个指令，您可以像这样使用它:

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

然后你会有一个看起来像这样的 Controller :

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/

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