角靴式手風琴無法正確折疊

Question

我正在研究一個使用Accordion和Sortable一起使用的頁面，遵循此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'
    };
});

任何人都可以通過解決方案或解決方法來提供幫助嗎？

編輯如果有人想玩，我已經在這個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，但我可能可以接受！

角靴式手風琴無法正確折疊

問題描述

1 個解決方案

解決方案1
0 已采納 2015-10-02 13:27:28

角靴式手風琴無法正確折疊

問題描述

1 個解決方案

解決方案1 0 已采納 2015-10-02 13:27:28

解決方案1
0 已采納 2015-10-02 13:27:28