1

Я работаю на странице, которая использует Аккордеон и Сортировка вместе, следуя 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' 
    }; 
}); 
Может

любой помощи, либо с помощью раствора или обходной путь?

EDIT Я воспроизвел это поведение в this Plunker, если кто-то хочет играть.

+0

'ng: model' вместо' ng-model'? – zacran

+0

Хорошо заметили, но это не изменило ситуацию. – Mourndark

ответ

0

Похоже, я использовал слишком новую версию jQuery/jQueryUI. Я перешел на jQuery v2.1.1 и UI v1.10.0. Я также перешел к v3.1.1 Bootstrap CSS. Мой последний заголовок выглядит следующим образом:

<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, как результат, но я, наверное, смогу с этим жить!

Смежные вопросы