我想在 ng-repeat 循环中使用 angularjs 制作手风琴，但没有 ui.bootstrap 也没有 jquery

Question

我尝试使用下面给出的代码。此代码不会折叠其他代码。它只是让其他面板 open.I 要在单击当前面板时关闭其他面板。不使用 jQuery 和 ui.bootstrap

的任何帮助将不胜感激

<div id="accordion" class="panel-group">
    <div ng-repeat="item in awesomeThings" >
        <div class="panel panel-default">
            <div class="panel-heading">
                 <h4 class="panel-title">
                     <a data-toggle="collapse" data-parent="#accordion"
                        href="#collapse{{$index+1}}"
                        ng-click="print($event)" class="nothing" >click</a>
                 </h4>
            </div>
            <div id="collapse{{$index+1}}" class="panel-collapse collapse ">
                <div class="panel-body">
               {{item.item}}
                </div>
            </div>
        </div>
    </div>
</div>

和我尝试将折叠的 class 添加到所有控制器部分，然后将 in class 添加到当前单击的项目并删除折叠的 class 来自当前项目

$scope.print= function($event){
   var el= angular.element(document.querySelector('.nothing'));
   console.log(el);
   el.addClass('collapsed');
   angular.element($event.target).removeClass('collapsed');
   angular.element($event.target).addClass('in');
}

Answer 1

首先，document.querySelector returns 只是第一场比赛，但您想获得所有比赛。 querySelectorAll 也不会完成这项工作，因为您将更改其 class 的 <a /> 标签作为目标将不会执行任何操作。

如果有的话，您可以更改 .collapse 元素的 classes - 删除 in 并添加 collapsed.

<!DOCTYPE html>
<html>

<head>
  <title></title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
  <script type="text/javascript">
    var app = angular.module('ngapp', []);
    app.controller('mainctrl', function($scope) {
      $scope.awesomeThings = [{
        item: 'heoj'
      }, {
        item: 'nniothing'
      }, {
        item: 'skgjs'
      }];
      $scope.print = function($event) {
        var el = angular.element('.panel-collapse');
        el.removeClass('in').addClass('collapsed');
        angular.element($event.target).removeClass('collapsed');
        angular.element($event.target).addClass('in');
      }
    })
  </script>
</head>

<body ng-app="ngapp" ng-controller="mainctrl">
  <div id="accordion" class="panel-group">
    <div ng-repeat="item in awesomeThings">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#accordion" href="#collapse{{$index+1}}" ng-click="print($event)" class="nothing">click</a>
          </h4>
        </div>
        <div id="collapse{{$index+1}}" class="panel-collapse collapse ">
          <div class="panel-body">
            {{item.item}}
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

https://jsbin.com/momuniz/edit?html,output

但是这会隐藏没有动画的展开面板，因为改变类是不够的，它应该有时间，这样折叠才会顺利。

要修复它，我们需要 bootstrap 来进行折叠，为此有一个 API：collapse ().

所以不要自己删除和添加 classes，让 bootstrap 用

来完成

el.collapse('hide')

实例

<!DOCTYPE html>
<html>

<head>
  <title></title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
  <script type="text/javascript">
    var app = angular.module('ngapp', []);
    app.controller('mainctrl', function($scope) {
      $scope.awesomeThings = [{
        item: 'heoj'
      }, {
        item: 'nniothing'
      }, {
        item: 'skgjs'
      }];
      $scope.print = function($event) {
        angular.element('.panel-collapse').collapse('hide');
      }
    })
  </script>
</head>

<body ng-app="ngapp" ng-controller="mainctrl">
  <div id="accordion" class="panel-group">
    <div ng-repeat="item in awesomeThings">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#accordion" href="#collapse{{$index+1}}" ng-click="print($event)" class="nothing">click</a>
          </h4>
        </div>
        <div id="collapse{{$index+1}}" class="panel-collapse collapse ">
          <div class="panel-body">
            {{item.item}}
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

https://jsbin.com/nigumad/edit?html,output

顺便说一句，当你使用angular.element时你不需要querySelector/All因为你可以直接将选择器传递给angular.element - angular.element('.nothing')

我想在 ng-repeat 循环中使用 angularjs 制作手风琴，但没有 ui.bootstrap 也没有 jquery

I want to make accordion in ng-repeat loop using angularjs only with no ui.bootstrap and no jquery

javascript

html

angularjs

twitter-bootstrap

bootstrap-accordion