猿问

我想在 ng-repeat 循环中仅使用 angularjs 制作手风琴

我尝试使用下面给出的代码。此代码不会折叠其他代码。它只是让其他面板保持打开状态。我想在单击当前面板时关闭其他面板。不使用 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>

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


$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');

}


MM们
浏览 84回答 1
1回答

慕标5832272

首先，document.querySelector仅返回第一个匹配项，但您希望获得所有匹配项。querySelectorAll也不会完成这项工作，因为您针对<a />更改其classes 的标签将无济于事。如果有的话，您可以更改元素的classes&nbsp;.collapse- removein和 add&nbsp;collapsed。<!DOCTYPE html><html><head>&nbsp; <title></title>&nbsp; <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">&nbsp; <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>&nbsp; <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>&nbsp; <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>&nbsp; <script type="text/javascript">&nbsp; &nbsp; var app = angular.module('ngapp', []);&nbsp; &nbsp; app.controller('mainctrl', function($scope) {&nbsp; &nbsp; &nbsp; $scope.awesomeThings = [{&nbsp; &nbsp; &nbsp; &nbsp; item: 'heoj'&nbsp; &nbsp; &nbsp; }, {&nbsp; &nbsp; &nbsp; &nbsp; item: 'nniothing'&nbsp; &nbsp; &nbsp; }, {&nbsp; &nbsp; &nbsp; &nbsp; item: 'skgjs'&nbsp; &nbsp; &nbsp; }];&nbsp; &nbsp; &nbsp; $scope.print = function($event) {&nbsp; &nbsp; &nbsp; &nbsp; var el = angular.element('.panel-collapse');&nbsp; &nbsp; &nbsp; &nbsp; el.removeClass('in').addClass('collapsed');&nbsp; &nbsp; &nbsp; &nbsp; angular.element($event.target).removeClass('collapsed');&nbsp; &nbsp; &nbsp; &nbsp; angular.element($event.target).addClass('in');&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; })&nbsp; </script></head><body ng-app="ngapp" ng-controller="mainctrl">&nbsp; <div id="accordion" class="panel-group">&nbsp; &nbsp; <div ng-repeat="item in awesomeThings">&nbsp; &nbsp; &nbsp; <div class="panel panel-default">&nbsp; &nbsp; &nbsp; &nbsp; <div class="panel-heading">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h4 class="panel-title">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a data-toggle="collapse" data-parent="#accordion" href="#collapse{{$index+1}}" ng-click="print($event)" class="nothing">click</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </h4>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <div id="collapse{{$index+1}}" class="panel-collapse collapse ">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="panel-body">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {{item.item}}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; </div></body></html>但这会隐藏没有动画的展开面板，因为改变类是不够的，它应该有时间，这样折叠才会平滑。要修复它，我们需要 bootstrap 来进行折叠，并且有一个 API 可以解决这个问题：collapse ().所以不要自己删除和添加classes，让bootstrap来做el.collapse('hide')活生生的例子<!DOCTYPE html><html><head>&nbsp; <title></title>&nbsp; <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">&nbsp; <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>&nbsp; <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>&nbsp; <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>&nbsp; <script type="text/javascript">&nbsp; &nbsp; var app = angular.module('ngapp', []);&nbsp; &nbsp; app.controller('mainctrl', function($scope) {&nbsp; &nbsp; &nbsp; $scope.awesomeThings = [{&nbsp; &nbsp; &nbsp; &nbsp; item: 'heoj'&nbsp; &nbsp; &nbsp; }, {&nbsp; &nbsp; &nbsp; &nbsp; item: 'nniothing'&nbsp; &nbsp; &nbsp; }, {&nbsp; &nbsp; &nbsp; &nbsp; item: 'skgjs'&nbsp; &nbsp; &nbsp; }];&nbsp; &nbsp; &nbsp; $scope.print = function($event) {&nbsp; &nbsp; &nbsp; &nbsp; angular.element('.panel-collapse').collapse('hide');&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; })&nbsp; </script></head><body ng-app="ngapp" ng-controller="mainctrl">&nbsp; <div id="accordion" class="panel-group">&nbsp; &nbsp; <div ng-repeat="item in awesomeThings">&nbsp; &nbsp; &nbsp; <div class="panel panel-default">&nbsp; &nbsp; &nbsp; &nbsp; <div class="panel-heading">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h4 class="panel-title">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a data-toggle="collapse" data-parent="#accordion" href="#collapse{{$index+1}}" ng-click="print($event)" class="nothing">click</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </h4>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <div id="collapse{{$index+1}}" class="panel-collapse collapse ">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="panel-body">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {{item.item}}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; </div></body></html>querySelector/All顺便说一句，你在使用的时候不需要，angular.element因为你可以将选择器直接传递给angular.element——angular.element('.nothing')
0
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答