我尝试使用下面给出的代码。此代码不会折叠其他代码。它只是让其他面板保持打开状态。我想在单击当前面板时关闭其他面板。不使用 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');}
1 回答
慕标5832272
TA贡献1966条经验 获得超4个赞
首先，document.querySelector仅返回第一个匹配项，但您希望获得所有匹配项。querySelectorAll也不会完成这项工作，因为您针对<a />更改其classes 的标签将无济于事。
如果有的话，您可以更改元素的classes .collapse- removein和 add 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>
但这会隐藏没有动画的展开面板，因为改变类是不够的，它应该有时间，这样折叠才会平滑。
要修复它，我们需要 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>
querySelector/All顺便说一句，你在使用的时候不需要，angular.element因为你可以将选择器直接传递给angular.element——angular.element('.nothing')
添加回答
举报
0/150
提交
取消