带有外部资源链接的手风琴 [英] Accordion with a link to external resource

问题描述

我正在尝试制作一个可点击整个标题 DIV 的手风琴，其中还包括一个不影响手风琴状态的链接，而是在新的选项卡/窗口中打开一个外部链接.

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

示例代码:

<div class="accordion-group"><div class="accordion-heading手风琴-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne"><a href="http://www.google.com" target="_blank">可折叠组项目 #1</a><br/>整个heder是<br/>可点击<br/>
<div id="collapseOne" class="accordion-body 折叠在"><div class="accordion-inner">卡通动漫头像 qq头像导航...

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

有可能实现吗?

解决方案

Forked to http://jsfiddle.net/ZPLff/

变化:

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

原因:data-toggle="collapse"(在可折叠数据 API 中)在其 .on.click() 中调用 e.preventDefault()-handler，所以你必须防止这种情况

I am trying to have an accordion with whole header DIV clickable which also includes a link which does not influence accordion status but instead open an external link in new a tab/windows.

but if I do this, header is capturing click event on my link and it toggles accordion status only.

Example code:

<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/

is it at all possible to implement?

解决方案

Forked to http://jsfiddle.net/ZPLff/

changes :

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

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

reason : data-toggle="collapse" (in collapsible data-api) calls e.preventDefault() in its .on.click()-handler, so you have to prevent this

这篇关于带有外部资源链接的手风琴的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！