Question

我是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>

我的尝试来自this example。

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

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

有什么想法吗？

感谢。

编辑：不工作我的意思是，什么也没发生。我可以使用ng-show指令，但没有平滑的动画。

Answer 1

正如docs所说，

您可以使用带有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>

Answer 2

我最终将jQuery和bootstrap添加到我的＆＃39; serve＆＃39; gulp任务，这是有效的，根本不会改变视图的代码。

Bootstrap动画不起作用

2 个答案: