RoR：link_to 块中的 link_to 标签？答案

【问题标题】：RoR: link_to tags in a link_to block?RoR：link_to 块中的 link_to 标签？
【发布时间】：2020-12-21 23:17:35
【问题描述】：

我正在尝试将 div 转换为链接，但我的块中有 link_to 标签，这不起作用。该块在调用 next link_to 时停止。

四处寻找答案后，我发现这根本不是正确的方法。

<%= link_to tweet_path(tweet.id) do %>
  <div class="tweet-link">
   blah blah
   <% link_to.... %>
   blah blah
   <% link_to.... %>
  </div>
<% end %>

解决这个问题的最佳方法是让嵌套链接和我的 div 链接一样工作？建议？也许是 jQuery？太棒了

【问题讨论】：

标签： jquery ruby-on-rails link-to

【解决方案1】：

可以，但不推荐。浏览器不知道如何阅读。这不是特定的 rails 问题，即使您使用纯 html <a> 标记执行此操作，也会导致不可预知的行为。

请看这里：https://stackoverflow.com/a/9883044/9595653

但也在这里 https://css-tricks.com/nested-links/

【讨论】：

是的，令人失望。 Twitter 是如何做到的。我不想做任何会导致问题发生的事情。
几乎总是可以在设计中找到一些细微的变化来适应这一点。 :)

【解决方案2】：

我在您提供的链接中使用了 Jules Colle 的这个 CSS 解决方案。

https://codepen.io/pwkip/pen/oGMZjb

.block {
  width: 200px;
  height: 300px;
  background-color:#dedede;
  position:relative;
  padding: 20px;
}

.block .overlay {
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  right:0;
}
.block .overlay:hover {
  background-color: #efefef;
}

.block .inner {
  position:relative;
  pointer-events: none;
  z-index: 1;
}

.block .inner a {
  pointer-events: all;
  position:relative;
}

a:hover {
  color: green;
}





  <div class="block">
     <a class="overlay" href="#overlay-link" title="overlay"></a>
       <div class="inner">
        <p>This entire box is a hyperlink. (Kind of)</p><br><br><br><br>
          <p><a href="#inner-link" title="inner">I'm a W3C compliant hyperlink inside that box</a></p>
      </div>
    </div>

https://stackoverflow.com/a/46707009/13027683

不完美，但它有效！太棒了

【讨论】：