与外部资源链接的手风琴

时间:2012-12-03 10:25:20

标签: twitter-bootstrap accordion

我正在尝试使用可以点击整个标题DIV的手风琴,其中还包括一个不影响手风琴状态的链接,而是在新的标签/窗口中打开外部链接。

但如果我这样做,标题就是在我的链接上捕获点击事件,它只会切换手风琴状态。

示例代码:

<div class="accordion" id="accordion2">
  <div class="accordion-group">
    <div class="accordion-heading accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
      <a href="http://www.google.com" target="_blank">
        Collapsible Group Item #1
      </a><br />
      whole heder is<br />
      clickable<br />
    </div>
    <div id="collapseOne" class="accordion-body collapse in">
      <div class="accordion-inner">
        Anim pariatur cliche...
      </div>
    </div>
  </div>
</div>

http://jsfiddle.net/LUzwP/6/

是否可以实施?

1 个答案:

答案 0 :(得分:9)

分叉到http://jsfiddle.net/ZPLff/

更改:

<a href="http://www.google.com" target="_blank" id="google">

$("#google").click(function(e) {
    e.stopPropagation();
});​

原因:data-toggle="collapse"(在collapsible data-api中)在e.preventDefault() - 处理程序中调用.on.click(),因此您必须阻止此