Fatal编程技术网
  • javascript/
  • Javascript 角引导手风琴未正确折叠

Javascript 角引导手风琴未正确折叠

javascript angularjs twitter-bootstrap

Javascript 角引导手风琴未正确折叠,javascript,angularjs,twitter-bootstrap,angular-ui,angular-ui-bootstrap,Javascript,Angularjs,Twitter Bootstrap,Angular Ui,Angular Ui Bootstrap,我正在做一个页面，它同时使用了Accordion和Sortable，但是尽管大多数事情都运行正常，但我的Accordion面板并没有正确折叠。标题行正确移动，但每个手风琴部分的“主体”未被隐藏，而是显示在以下标题下 我已经查看了示例中发生的情况，似乎当单击标题以折叠面板时，面板会立即获得一个collasing类，然后被一个隐藏面板的collapse类替换。在我的例子中，面板永远不会被赋予collapse类，因此面板仍然可以在下面的标题后面看到。无论close others的值如何，都会看到此行为

我正在做一个页面，它同时使用了Accordion和Sortable，但是尽管大多数事情都运行正常，但我的Accordion面板并没有正确折叠。标题行正确移动，但每个手风琴部分的“主体”未被隐藏，而是显示在以下标题下

我已经查看了示例中发生的情况，似乎当单击标题以折叠面板时，面板会立即获得一个
collasing
类，然后被一个隐藏面板的
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>
有人能提供解决方案或解决方法吗

编辑我在《如果有人想玩》中复制了这种行为。

看起来我使用的jQuery/jQueryUI版本太新了。我已经降级到jqueryv2.1.1和UI v1.10.0。我还访问了引导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，但我可能可以接受它

看起来我使用的jQuery/jQueryUI版本太新了。我已经降级到jqueryv2.1.1和UI v1.10.0。我还访问了引导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，但我可能可以接受它

ng:model
而不是
ng model
？定位正确，但没有什么区别。
ng:model
而不是
ng model
？定位正确，但没有什么区别。