Rails 通过“阅读更多”切换截断答案

【问题标题】：Rails truncate with a 'read more' toggleRails 通过“阅读更多”切换截断
【发布时间】：2013-03-07 03:21:33
【问题描述】：

我有一个段落，我想通过单击“阅读更多”的选项来截断它，并让它与其余内容一起滑动打开。内容来自数据库字段。这是我截断的内容：

<%= truncate(@major.glance, :length => 250, :omission => '... Read More')%>

我似乎无法找到一种方法来处理从数据库中提取的数据。我看到很多示例使用全文以及要隐藏在单独的 div 标记中的文本。但是，由于此内容来自数据库并且是动态的，因此我找不到任何有关如何操作的信息。

【问题讨论】：

这是一个对我有用的简单答案。 stackoverflow.com/a/26854494/5551783

标签： javascript jquery ruby-on-rails ruby-on-rails-3 truncate

【解决方案1】：

你可以试试下面的

<div>
  <% if @major.glance.length > 250 %>
    <%= link_to_function truncate(@major.glance, length: 250), "$(this).parent().html('#{escape_javascript @major.glance}')" %>
  <% else %>
    <%= @major.glance %>
  <% end %>
</div>

或者如果您更喜欢使用Read more 链接

<div>
  <% if @major.glance.length > 250 %>
    <%= truncate(@major.glance, length: 250) %>
    <%= link_to_function '...Read more', "$(this).parent().html('#{escape_javascript @major.glance}')" %>
  <% else %>
    <%= @major.glance %>
  <% end %>
<div>

更新

由于在 Rails 4 中，link_to_function 已被弃用，建议使用非干扰 js，请使用以下内容

<div>
  <% if @major.glance.length > 250 %>
    <%= truncate(@major.glance, length: 250) %>
    <%= link_to '...Read more', '', class: "read-more-#{@major.id}" %>
    <script>
      $('.read-more-<%= @major.id %>').on('click', function(e) {
        e.preventDefault()
        $(this).parent().html('<%= escape_javascript @major.glance %>')
      })
    </script>
  <% else %>
    <%= @major.glance %>
  <% end %>
<div>

【讨论】：

只是一个后续，您不能使用 omission 选项作为链接的原因是因为 truncate 方法将其包含在字符数中。您可以使用它，但您必须在计算要截断的字符数时添加一些逻辑。
您可以更改 js 部分，使其再次更改父级的内容。或添加 2 个 div，一个带有截断部分，另一个带有未截断部分，然后只需切换 div。
只需将此部分 "$(this).parent().html('#{escape_javascript @major.glance}')" 更改为 MooTools 等效项即可。

【解决方案2】：

我知道我加入这个对话有点晚了。我一直在解决同样的问题，尝试了上面的解决方案，效果很好。然而，被隐藏的 SEO 明智的内容并没有被搜索引擎索引。我也签入了Lynx，并且无法访问该链接（显然）。所以通过Jed Foster | readmore.js 解决了这个解决方案 - lynx 可以正确读取它，现在我正在等待 SE 索引更新，看看我是否可以在搜索结果中找到自己。以防万一有人遇到类似情况……

【讨论】：

感谢您让我了解 readmore.js，这正是我想要做的事情。这看起来很棒。感谢分享！