Question

当单击父div“.row”以显示更多内容“.ExpandPane”时，我有以下代码来切换列表中的元素，但是当单击父div“.row”中的链接时，它们也会激活切换功能

有没有办法可以解决这个问题我希望能够点击父div“.row”中的任意位置，但允许父div“.Row”内的链接正常运行而不激活切换功能

HTML

<div class="Row">
   <a class="acceptBtn"></a>
   <p>content.....</p>
   <div class="ExpandPane"></div> <!-- hidden -->
</div>
<div class="Row">
   <p>content...</p>
   <a class="acceptBtn"></a>
   <div class="ExpandPane"></div><!-- hidden -->
</div>
<div class="Row">
    <p>content....</p>
    <a class="acceptBtn"></a>
   <div class="ExpandPane"></div><!-- hidden -->

</div>

JQuery

 $(".Row").toggle(
      function () {
        $(this).find('.ExpandPane').show();
        //$(this).find('.PhotoShow').hide();
        //$(this).find('.PhotoHide').show();

      },
      function () {
        $(this).find('.ExpandPane').hide();
        //$(this).find('.PhotoHide').hide();
        //$(this).find('.PhotoShow').show();
      });


$(".acceptBtn").click(function(event) {
  alert("hi");
});

Answer 1

$(".acceptBtn").click(function(event) {
  alert("hi");
  event.stopPropagation();
});

stopPropagation()可防止事件冒泡到您的父div。此外，这个问题在SO上已被回答了大约100次。

如何获取父Div中的链接以不切换

1 个答案: