Javascript 轨道用'截断；阅读更多'；切换

我有一个段落，我想用点击“阅读更多”的选项将其截断，并将其与其余内容一起滑开。内容来自数据库字段。以下是我为截断所做的准备：

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

250，：省略=>”。。。阅读更多’）%%>

---

我似乎找不到一种方法来处理从数据库中提取的数据。我看到很多例子都使用了全文，其中包含要隐藏在单独div标记中的文本。但是，由于这些内容来自数据库，而且是动态的，所以我找不到任何关于如何做的信息

您可以尝试以下方法

<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>

<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>

更新

由于在Rails 4中，

link\u to\u函数

已被弃用，建议使用非干扰性js，请使用以下命令

<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>

<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>

250 %>
$（'.read more-'）。关于（'单击'，函数（e）{
e、 预防默认值（）
$（this.parent（）.html（“”）
})

我知道我加入这个对话有点晚了。我一直在解决同样的问题，尝试上面的解决方案，效果很好。然而，SEO方面隐藏的内容并没有被搜索引擎索引。我也签了，链接无法遵循（显然）。所以，这个解决方案解决了-lynx可以正确地阅读它，现在我正在等待SE索引更新，看看我是否可以在搜索结果中找到自己。以防有人处于类似的情况

接下来，您不能使用

省略

选项作为链接的原因是因为truncate方法在字符计数中包含了这一点。您可以使用它，但必须在计算要截断的字符数时添加一些逻辑。您可以更改js部分，以便它再次更改父级的内容。或者添加两个div，一个带有截断部分，另一个带有非加密部分，然后只需切换div。只需将此部分

“$（this）.parent（）.html（'.{escape_javascript@major.glance}'）”

更改为MooTools的等效部分，就可以了。感谢您让我知道readmore.js这正是我想要做的事情。这看起来很棒。谢谢分享！这是一个对我有效的简单答案。