Angular bootstrap 手风琴折叠不正确

Question

我正在处理一个同时使用 Accordion 和 Sortable 的页面，在 this Plunker 之后，但是虽然大多数事情都正常运行，但我的手风琴面板没有正确折叠。 header 行移动正确，但每个手风琴部分的 "body" 未被隐藏，而是显示在以下标题下。

我查看了示例中发生的情况，似乎在单击 header 折叠面板时，面板会立即获得 collapsing class然后用隐藏面板的 collapse class 替换。在我的例子中，面板永远不会被赋予 collapse class 因此面板在下面的标题后面仍然可见。无论 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">&#8597;</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中复制了这种行为。

Answer 1

看来我使用的 jQuery/jQueryUI 版本太新了。我已降级到 jQuery v2.1.1 和 UI v1.10.0。我也去了 Bootstrap CSS 的 v3.1.1。我的最终 header 看起来像这样：

<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>

在 body 底部使用以下脚本标记：

<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，但我可能可以忍受！

Angular bootstrap 手风琴折叠不正确

Angular bootstrap accordion not collapsing correctly

javascript

twitter-bootstrap

angularjs

angular-ui

angular-ui-bootstrap