javascript - 有什么办法可以使这些链接在另一个链接中起作用

Question

我有以下标记:

<a class="list-group-item hola" id="competition-card-<%= competition.id %>" href="a_url_to_a_site">
    <div class='row'>
          <div class='col-xs-11'>
            Some text
          </div>

        <div class='col-xs-1 shows-submenu'>
           Some text
        </div>
    </div>
</a>

我正在努力实现:

1. 如果用户点击“a”标签，他将被定向到一个网站，除非...
2. 用户点击“.shows-submenu”div 会显示一个隐藏的 div。

我的 jQuery 如下:

$('body').on('click', '.shows-submenu', function(e) {
   event.stopImmediatePropagation();
  if ($(this).closest('a.list-group-item').next('.hidden-group-item').hasClass('hide')) {
     $('.hidden-group-item').addClass('hide');
     $(this).closest('a.list-group-item').next('.hidden-group-item').toggleClass('hide');
  }
  else {
     $(this).closest('a.list-group-item').next('.hidden-group-item').toggleClass('hide');
  }
}); 

目前，如果我单击“.shows-submenu”div，“a”标签仍会被调用，我会被定向到该站点。例如，当我使用引导卡插件时，我无法将“a”标签更改为 div。

有什么方法可以仅在单击“.shows-submenu”div 时停止“a”。我试过在“a”和“div”中使用 stopPropagation 但没有成功。

Answer 1

您正在寻找的是 event.stopPropagation() 将防止冒泡和 event.preventDefault 将避免链接 onClick 的默认行为。

幸运的是，在 jQuery 中，在点击处理函数中返回 false 会同时触发这两个事件。更多关于这里的主题:https://stackoverflow.com/a/1357151/670377

所以你只需要将你的函数修改为:

$('document').on('click', '.shows-submenu', function(e) {
  if ($(this).closest('a.list-group-item').next('.hidden-group-item').hasClass('hide')) {
     $('.hidden-group-item').addClass('hide');
     $(this).closest('a.list-group-item').next('.hidden-group-item').toggleClass('hide');
  }
  else {
     $(this).closest('a.list-group-item').next('.hidden-group-item').toggleClass('hide');
  }
  // This will be equivalent to 
  // e.preventDefault; e.stopPropagation;
  return false;
});

event.stopImmediatePropagation除了停止默认功能之外还有另一个目的，它还将阻止调用元素的所有剩余监听器。