引导折叠删除折叠 div 内的 href 事件答案

【问题标题】：Bootstrap collapse removing a href events inside of collapse div引导折叠删除折叠 div 内的 href 事件
【发布时间】：2016-06-24 15:06:11
【问题描述】：

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

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

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

我该如何解决这个问题？

这是我的样本：

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

【问题讨论】：

我看到您正在使用带有 Angular 的引导程序，并建议将 Angular UI Bootstrap (angular-ui.github.io/bootstrap) 用于引导程序组件作为 Angular 指令
谢谢，但这并不能解决我的问题。
对于可折叠部分内的链接，通过处理 onclick 事件并执行 e.stopPropagation 来停止传播。

标签： javascript jquery css twitter-bootstrap

【解决方案1】：

在那个示例中，当我点击 link1 我的 div 折叠并且应该如果我再次点击 link1 就会返回，现在发生的情况是，如果我单击该 div 内的任何锚元素，该 div 会向后折叠，例如如果我点击 link2 或 link3。

那么您必须将该链接 1 设置为折叠的触发元素，而不是触发锚点和可折叠 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

【讨论】：