我正在开发一个同时使用 Accordion 和 Sortable 的页面，如下 this Plunker但是，虽然大多数事情都表现正常，但我的 Accordion 面板没有正确折叠。标题行移动正确，但每个 Accordion 部分的“主体”并未隐藏，而是显示在以下标题下。
我已经查看了示例中发生的情况，似乎当单击标题来折叠面板时，面板会立即获得一个 collapsing 类，然后该类会被替换为 collapse 隐藏面板的类。就我而言，面板永远不会被赋予 collapse 类，因此面板在下面的标题后面仍然可见。无论 close-others 的值如何，都会出现此行为。
这是我标记的相关部分:
<div ng-controller="myController">
<accordion close-others="true" ui:sortable="sortableOptions" ng:model="items">
<accordion-group ng-repeat="item in items">
<div accordion-heading heading="{{item.name}}">
<span class="handle btn">↕</span><span>{{item.name}}</span>
</div>
{{item.details}}
</accordion-group>
</accordion>
</div>
和app.js:
var app = angular.module('myApp', ['ui.sortable', 'ui.bootstrap']);
app.config(['$provide', function ($provide){
$provide.decorator('accordionDirective', function($delegate) {
var directive = $delegate[0];
directive.replace = true;
return $delegate;
});
}]);
app.controller('myController', function($scope){
$scope.items = [{name: "my item", details: "my details}, ...]
$scope.sortableOptions = {
handle: ' .handle',
axis: 'y'
};
});
任何人都可以提供解决方案或解决方法吗？
编辑我已在 this Plunker 中复制了此行为如果有人想玩的话。
最佳答案
看起来我使用的 jQuery/jQueryUI 版本太新了。我已经降级到 jQuery v2.1.1 和 UI v1.10.0。我还使用了 Bootstrap CSS v3.1.1。我的最终标题如下所示:
<head>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/css/smoothness/jquery-ui-1.10.0.custom.min.css" />
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/jquery-ui.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
</head>
在正文底部添加以下脚本标签:
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.11.2/ui-bootstrap-tpls.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-sortable/0.13.2/sortable.min.js"></script>
<script src="app.js"></script>
结果我的 CSS 完全被搞砸了，但我可能可以忍受!
关于javascript - Angular Bootstrap Accordion 未正确折叠，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32847129/