Question

我正在使用Accordion和Sortable在this Plunker之后的页面上工作，但是大多数事情都表现正常，我的手风琴面板没有正确折叠。标题行正确移动，但每个手风琴部分的“主体”未被隐藏，并显示在以下标题下。

我已经看过示例中发生了什么，似乎单击标题以折叠面板时，面板会暂时获得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">&#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。我的最终标题如下：

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

Angular bootstrap手风琴没有正确折叠

1 个答案: