Question

我正在使用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;
    }

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/

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

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

1 个答案: