引导动画不起作用

Bootstrap animations not working

本文关键字：不起作用 动画      更新时间：2023-09-26

我对Angular/Bootstrap很陌生，我下载了一个模板，我正在尝试修改并添加功能以进行学习。

我正在尝试拥有一个可折叠的子菜单

<ul class="nav nav-sidebar">
    <li ng-class="{active: $state.includes('overview')}"><a ui-sref="overview">Overview <span class="sr-only">(current)</span></a></li>
    <li><a href="" data-toggle="collapse" data-target="#products">Products</a></li> <!-- a click on this should expand the div below... --> 
    <div class="collapse" id="products">
        <ul>
             <div ng-repeat="itemType in itemTypes">
                <li><a href="" class="list-group-item">{{itemType.Description}}</a></li>
             </div>
        </ul>
    </div>
</ul>

我的尝试来自这个例子。

我希望通过单击锚点来触发动画，而不是按钮。

我读到一个版本的 Bootstrap 在动画方面遇到了问题，所以我升级到了bootstrap#3.3.6

有什么想法吗？

谢谢。

编辑：通过不工作，我的意思是，什么都没有发生。我可以使用ng-show指令，但没有流畅的动画。

正如文档所说，

可以使用具有 href 属性的链接，也可以使用具有 data-target 属性的按钮。在这两种情况下，都需要data-toggle="collapse"。

将锚标记更改为使用 href 属性而不是 data-target 。

<a href="#products" data-toggle="collapse">Products</a>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<ul class="nav nav-sidebar">
    <li ng-class="{active: $state.includes('overview')}"><a ui-sref="overview">Overview <span class="sr-only">(current)</span></a></li>
    <li><a href="#products" data-toggle="collapse">Products</a></li> <!-- a click on this should expand the div below... --> 
    <div class="collapse" id="products">
        <ul>
             <div ng-repeat="itemType in itemTypes">
                <li><a href="" class="list-group-item">{{itemType.Description}}</a></li>
             </div>
        </ul>
    </div>
</ul>

我最终将 jQuery 和引导程序添加到我的"服务"gulp 任务中，这很有效，根本不需要更改视图的代码。

相关文章：