Question

我正在使用以下代码切换工具提示

$('.call-out').toggle(
    function() { 
        $(this).find('.tip').addClass('tip-position').fadeIn("fast");
    },
    function() { 
        $(this).find('.tip').fadeOut("fast");
    }
);

在我的.tip中有一个包含一些锚点的列表，如何在点击其中一个链接时阻止提示关闭？

我尝试过使用.not（）;从呼出中排除锚点但这不起作用。

$('.call-out').not('a').toggle(
    function() { 
        $(this).find('.tip').addClass('tip-position').fadeIn("fast");
    },
    function() { 
        $(this).find('.tip').fadeOut("fast");
    }
);

HTML示例

<div class='call-out w PMPB12UN'>
   <div class='tip'>
      <img src="images/graph/DFN2020MD-6.png" />
      <p class="description">
         xx
      </p>
      <ul class="bullet-blue-list">
         <li><a href="/pip/PMPB12UN" target="_blank" title="xx">Product Information</a></li>
         <li><a href="#" target="_blank" title="#">xx</a></li>
         <li><a href="#" target="_blank" title="Buy online">Buy online</a></li>
      </ul>
   </div>
   <div class='product_image'>
      <img src="images/graph/DFN2020MD-6.png" />
   </div>
   <div class='label'>
      <div class='top'>
         <p class='title'>xx</p>
      </div>
      <div class='middle'>
      </div>
      <div class='bottom'>
         <p class='package'>DFN2020MD-6</p>
      </div>
   </div>
</div>

谢谢！

Answer 1

执行此操作的一种方法是在点击超链接时添加event.stoppropagation。因此，子项anchor上的click事件不会传播到导致切换的父项。

$('.call-out a').click(function(e){
e.stopPropagation();
});

Fiddle

请注意，此版本的切换已弃用，并且在以后的jquery版本中不受支持。

请参阅.toggle()文件。对于您将要注册的lates单击事件并手动执行切换。它不再支持自己作为虚拟事件和2个回调。

单击链接关闭工具提示;如何防止这种情况

1 个答案:

Fiddle