希望jQuery accordion 中的超链接不打开 accordion ，而是转到超链接

我有一个jquery accordion-当你点击标题行时，accordion会下拉4个项目符号。4个项目符号中的每一个都有链接，可以打开一个弹出窗口。在标题行中，还有一个类似的链接，我也想打开一个弹出窗口（为约翰阿姆斯特朗）。然而，我无法在标题行中获得该链接以打开弹出窗口。相反，它打开了 accordion ，就好像我点击了标题行上的任何地方。感谢您的任何帮助或建议。代码在下面。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<script>
  $( function() {
    $( "#accordion" ).accordion({
      collapsible: true,
      active: false
    });
  } );
  
function showImage(ImageLocation,Height,Width)
{
   var NewWindow = window.open(ImageLocation,"_blank","toolbars=0,width=" + Width + ",height=" + Height);
       NewWindow.moveTo(300,100);
}
</script>  
  
</head>

<body>
<div id="accordion">
<h3><strong>Session III:</strong>
<span class="titlelink">Translational research and innovative technologies</span>
<em><u>Co-Chairs</u>: Xiaofeng Yang &amp; <a class="bio" href="javascript:showImage('https://inflammationresearch.org/2023bios/armstrong.html','730','750');">John Armstrong</a></em></h3>
<div>
<ul>
    <li><strong>Single cell RNA-Seq for inflammation research</strong>
<ul class="c">
    <li><em><a class="bio" href="javascript:showImage('https://inflammationresearch.org/2023bios/shen.html','630','750');">Professor Ying H. Shen</a>, MD, PhD at Baylor College of Medicine</em></li>
</ul>
</li>
    <li><strong>Inflammation triggered tissue remodeling and novel therapeutics</strong>
<ul class="c">
    <li><em><a class="bio" href="javascript:showImage('https://inflammationresearch.org/2023bios/vazquezpadron.html','730','750');">Professor Roberto Vazquez-Padron</a>, PhD, University of Miami</em></li>
</ul>
</li>
    <li><strong>Mass spectrometry based approaches to blood based marker detection for Oncology</strong>
<ul class="c">
    <li><em><a class="bio" href="javascript:showImage('https://inflammationresearch.org/2023bios/mcdowell.html','730','750');">Colin McDowell</a>, PhD, Biodesix</em></li>
</ul>
</li>
    <li><strong>A.I. for Drug Development in Immune-Mediated Inflammatory Disorders</strong>
<ul class="c">
    <li><em><a class="bio" href="javascript:showImage('https://inflammationresearch.org/2023bios/armstrong.html','730','750');">John Armstrong</a>, PhD, President, JAV, LLC</em></li>
</ul>
</li>
</ul>
</div>
</body>
</html>

'''

您所面临的问题是因为<h3>标题中链接的click事件正在传播到父<h3>元素并激活可折叠切换行为。为了防止这种行为，可以使用jQuery的stopPropagation()方法停止事件传播。
以下是您可以实现这一点的方法：
1.将事件侦听器附加到<h3>标记内的链接。
1.对事件调用stopPropagation()方法，以防止它冒泡到父元素。
1.让我们修改<script>块，为<h3>标记中的链接添加事件侦听器：

$(function() {
  $("#accordion").accordion({
    collapsible: true,
    active: false
  });

  // Stop event propagation for links inside <h3> tags
  $("#accordion h3 a.bio").on("click", function(e) {
    e.stopPropagation();
  });
});

function showImage(ImageLocation, Height, Width) {
  var NewWindow = window.open(ImageLocation, "_blank", "toolbars=0,width=" + Width + ",height=" + Height);
  NewWindow.moveTo(300, 100);
}

通过添加e.stopPropagation();行，我们确保当您单击“John Armstrong”的链接时，单击事件不会传播到父<h3>标记，从而防止 accordion 切换。相反，只执行showImage函数，并按预期打开弹出窗口。

希望jQuery accordion 中的超链接不打开 accordion ，而是转到超链接

1条答案

相关问题

热门标签

最新问答