嘿伙计们，我正在尝试创建一个可折叠面板:所以应该有面板标题和面板主体来显示内容。单击的行为是，当按下按钮时，内容将折叠起来，如果单击同一按钮，内容将关闭。如果单击第二个按钮，将折叠第二个按钮的内容，并关闭第一个按钮的折叠。基本上应该像可折叠面板( Bootstrap )一样工作，但仅使用 Angular 开发。到目前为止我已经做到了这一点，但我是 Angular 初学者，所以如果你能帮助我......
<强> fiddle:
<body ng-app="app">
<div ng-controller="Test" class="container">
<div class="custom">
<button ng-click="show = 1" class="btn">collapse 1</button>
<button ng-click="show = 2" class="btn">Collapse 2</button>
<div class="form-group" ng-show="show==1">
<div class="sec">show 1</div>
</div>
<div class="form-group" ng-show="show==2">
<div class="sec">show 2</div>
</div>
<div class="form-group" ng-show="show==3">
</div>
</div>
</div>
</body>
最佳答案
这是更新后的fiddle这应该满足您正在寻找的要求。有一些变化，但似乎有效。它不使用 bootstrap，但您的动画需要 ng-animate。
我已经在表单组元素周围放置了一个包装器，并将 ng-show 更改为 ng-if。
//html
<button ng-click="showDiv(1)" class="btn">collapse 1</button>
<button ng-click="showDiv(2)" class="btn">Collapse 2</button>
<div class="sec-wrp" ng-if="show === 1">
<div class="form-group" >
<div class="sec">show 1</div>
</div>
</div>
<div class="sec-wrp" ng-if="show === 2">
<div class="form-group" >
<div class="sec">show 2</div>
</div>
</div>
<div class="form-group" ng-if="show==3" >
</div>
点击事件现在使用您想要显示的 div 的值调用 Controller 中的函数。 Controller 通过将 $scope.show 值设置为 0 来进行响应。如果 currentShow 值为零(因为它已初始化)，则会设置 $scope。 show 值更改为传递的值，并将 currentShow 变量重置为新值，且没有超时。如果传递的值等于 currentShow 值，则不会重置 $scope.show 并将 currentShow 重置为零，从而将其视为切换该分区。如果传递的 int 不等于 currentShow，则会将 currentShow 和 $scope.show 设置为新值。
//controller
var app = angular.module('app', ['ngAnimate']);
app.controller('Test', ['$timeout','$scope', function($timeout, $scope) {
$scope.show = 0;
var currentShow = 0;
$scope.showDiv = function(int){
$scope.show = 0;
if(currentShow === 0){
currentShow = int;
$scope.show = int;
return false;
}
if(currentShow === int){
$timeout(function(){
currentShow = 0;
return false;
}, 1000)
}else{
$timeout(function(){
currentShow = int;
$scope.show = int;
}, 1000)
}
}
}]);
一秒的 $timeout 值对应于动画的过渡时间，即，允许 1 秒的动画在 css 中等待一秒的时间来完成，它使用 ng- Enter，ng-leave 而不是关键帧。如果您想在此处调整转换时间，只需确保您也调整 $timeouts。
//css
.custom{position: relative; z-index: 2; border: 1px solid #ccc;}
.sec{
padding: 20px;
border: 1px solid orangered;
background: orange;
height: 100px;
z-index: 1;
}
.sec-wrp{
overflow: hidden;
transition: all ease 1s;
}
.sec-wrp.ng-enter{
opacity: 0;
height: 0;
}
.sec-wrp.ng-enter.ng-enter-active{
opacity: 1;
height: 100px;
}
.sec-wrp.ng-leave{
opacity: 1;
height: 100px;
}
.sec-wrp.ng-leave.ng-leave-active{
opacity: 0;
height: 0;
}
希望这有帮助。
关于javascript - angularjs 1折叠具有不同内容的同一面板，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43115604/