javascript - Bootstrap collapse 删除 collapse div 内的 href 事件

Question

我正在使用来自:http://v4-alpha.getbootstrap.com/components/collapse/ 的 Boostrap Collapse ，但是当我的崩溃中有一个 a href 链接时，我遇到了一个问题。

现在，如果我点击我折叠内的任何一个 href，div 就会折叠回来，但这只发生在 href 链接上 带有文本事件没有发生，有人知道我该如何解决这个问题？

在那个示例中，当我点击 link1 时，我的 div 崩溃了，应该只是 如果我再次点击 link1 返回，现在发生的情况是如果我点击任何 该 div 内的 anchor 元素 div 向后折叠，就像我点击 link2 或 link3。

我该如何解决这个问题？

这是我的样本:

http://jsfiddle.net/SMZHG/12/

Answer 1

In that sample when I click on link1 my div collapse and should just back if I click again in link1, what is happening now is if I click any anchor element inside that div the div collapse back, like if I click in link2 or link3.

然后您必须使 link1 成为折叠的触发元素，而不是触发 anchor 和可折叠 div 所在的整个 li 元素。

正确的 HTML

<ul>
    <li ng-click="linkClicked(2)" ng-class="{'current': activeLinks[2]}">

        <a data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
            link1<i class="pull-right fa fa-circle" aria-hidden="true"></i>
        </a>

        <div class="collapse collapse-styled" id="collapseExample">
            <a ng-click="linkClicked(2)" ng-class="{'current': activeLinks[2]}" href="#/session/assign">
                link 2 <i class="pull-right fa fa-calendar" aria-hidden="true"></i>
            </a>
            <a ng-click="linkClicked(3)" ng-class="{'current': activeLinks[3]}">
                link3 <i class="pull-right fa fa-list" aria-hidden="true"></i>
            </a>
        </div>

    </li>
</ul>

和 jsfiddle