javascript - 无法单击以关闭AngularJS中的 Accordion

由于“ div”和“ td”的原因，我无法使用Bootstrap或JQuery手风琴，所以目前我通过一些AngularJS拥有一个手风琴，它是：

$scope.viewMeasures = function($event) {
  var log = $($($event.target)[0]).closest('tbody');
  $('tbody.measure.selected').hide();
  $('tbody.selected').removeClass('selected');
  $(log).addClass('selected');
  $(log).next('tbody').fadeIn(20);
  $(log).next('tbody').addClass('selected');
}

这使我可以打开手风琴但不能关闭它。有什么建议么？

这也是我的翡翠供参考：

body.log(ng-repeat-start="log in logs | orderBy : ['date_created'] : true")
    tr.log(ng-click="viewMeasures($event)", id='{{log._id}}')
      td
        strong {{log.date_created | date:'MM-dd-yyyy'}}
      td
        span.static
          strong {{log.name}}
        input.editable.form-control(ng-model='log.name')
      td
        strong {{log.updated_by}}

最佳答案

在控制器中处理DOM并不是一个好习惯。
如果要向元素添加行为，请改用指令。

我通常采用的方法是首先查找已经具有所需行为的HTML元素。否则，我将寻找现有的指令或模块（例如ngmodules.org）。如果找不到任何内容，则会获得可以在功能方面找到的最接近的元素并将其扩充。

对于您的情况，我考虑将<summary>与<details>一起使用。为了产生手风琴效果（当另一个打开时会折叠），我将创建一个名为group（或类似名称）的指令，该指令将按<summary>聚合所有[group]标签。

检出this JSBin。

angular.module('gtDetailsGroup', []).
directive('gtGroup', function () {
  var groups = {};

  var directive = { restrict: 'A' };

  directive.compile = function compile (tElement, tAttrs) {
    if (!isDetails(tElement)) return;

    var group = tAttrs.gtGroup;
    (groups[group] || (groups[group] = [])).push(tElement);

    return link;
  };

  function isDetails (element) {
    return element.prop('tagName') === 'DETAILS';
  }

  function link ($scope, iElement, iAttrs) {
    var group = iAttrs.gtGroup;
    iElement.on('click', function () {
      groups[group].filter(function (element) {
        return iElement[0] !== element[0];
      }).forEach(function (element) {
        element.removeAttr('open');
      });
    });
  }

  return directive;
});

在您的应用中，包括gtDetailsGroup作为依赖项。例：

angular.module('MyApp', ['gtDetailsGroup']);

并像这样使用它：

<details gt:group="metrics">...</details>
<details gt:group="metrics">...</details>
<details gt:group="metrics">...</details>

这三个细节将表现得像手风琴。当一个打开时，其他关闭。