折叠仅打开一个项目在AngularJS中不起作用

Question

我试图在我的应用程序中自定义折叠。 我已经尝试过AngularJS UI Bootstrap随附的手风琴插件，但是它相当复杂，因为我需要的是并排只有2个链接，并且折叠元素在下面连续打开，所以我决定包括Bootstrap中的transition.js和crash.js。

到目前为止，我的代码如下所示：

<div class="logo" id="accordion">
      <a data-parent="#accordion" data-toggle="collapse" data-target="#login">
        Log In
      </a>

      <a data-parent="#accordion" data-toggle="collapse" data-target="#signup">
        Sign Up
      </a>

      <div id="signup" class="collapse">dfkñfkldsklñfdsñlkfd ñlkdflkfdñlfsdñl ksfdlkfdslñsfdñl kfdkfkldl fdksñlfdklfdñksfd

      <div id="login" class="collapse">blablabla</div>

</div>

收合效果非常好，但是到目前为止，我还无法完成“一次只能打开一个项目”的效果。

可能与AngularJS文件存在某种冲突？

这是一个正在工作的柱塞 。

Answer 1

我认为简短的答案是您需要具有两个变量loginCollapsed和signUpCollapsed并在控制器中signUpCollapsed管理互斥。 例如：

// untested
$scope.$watch('loginCollapsed', function(val){
  signUpCollapsed = !loginCollapsed;
})

有角度的用户会建立一些良好的做法，并有一个手风琴可以选择打开一个或多个波纹管 ：

执行来源：

if ( closeOthers ) {
  angular.forEach(this.groups, function (group) {
    if ( group !== openGroup ) {
      group.isOpen = false;
    }
  });
}

https://github.com/angular-ui/bootstrap/blob/master/src/accordion/accordion.js#L13