Jquery-修复切换元素内部的超链接

Jquery - fix hyperlinks inside of a toggled element

本文关键字:内部 超链接 元素 Jquery-      更新时间:2023-09-26

我的一些Jquery脚本有问题,我希望有人能为我指明正确的方向。

我有一个区域最初是隐藏的,但点击后会显示其内容,再次点击会隐藏其内容。在这个区域内有一系列的超链接。我面临的问题是,当点击这些链接时,容器没有重定向到其他地方,而是再次关闭。我能理解为什么会发生这种情况,但我不确定如何解决。

功能:-

function toggleDisplay(itemToToggle, itemHeightOpen, itemHeightClosed) {
$(itemToToggle).toggle(
  function () {
    $(this).animate({ 'height': itemHeightClosed }).addClass('minus');
    },
      function () {
    $(this).animate({ 'height': itemHeightOpen }).removeClass('minus');
    });
 };

电话:-

var heighttomatch = $('#inlineSummaryWrapper').height() + 28;
toggleDisplay('#inlineSummary', '1.2em', heighttomatch);

html:-

<div id="inlineSummary" class="displayToggle">
  <h2>Summary</h2>
  <div id="inlineSummaryWrapper">
   <a href="/mylink">the link</a>
  </div>
</div>

我确实试着把";呼叫";在一个针对H2的点击操作内部,但这对容器本身的打开和关闭产生了奇怪的影响,所以我不知道该怎么办。

发生这种情况是因为链接上的click事件正在传播。你可以用event.stopPropagation()来阻止它。

function toggleDisplay(itemToToggle, itemHeightOpen, itemHeightClosed) {
    $(itemToToggle).find('a').click(function (e) {
        e.stopPropagation();
    });
    ...
}