Question

我遇到了一些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的点击操作中包装“调用”，但是对于容器打开和关闭本身有一个奇怪的效果，所以我不知道该怎么做。

提前感谢您的协助。

Answer 1

这是因为链接上的click事件传播。您可以使用event.stopPropagation()停止播放。

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

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

1 个答案: