Szyny obcinane z przełącznikiem "czytaj więcej"

Question

Mam akapit, który chcę skrócić z opcją kliknięcia "czytaj więcej" i pozostawić otwarty z resztą zawartości. Treść pochodzi z pola bazy danych. Oto co mam do skróconej:

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

I nie wydają się znaleźć sposób, aby to zrobić z danymi ciągniętych z bazy danych. Widzę wiele przykładów, używając pełnego tekstu z tekstem, który chcesz ukryć w oddzielnym znaczniku div. Ponieważ jednak ta zawartość pochodzi z bazy danych i jest dynamiczna, nie mogę znaleźć żadnych informacji, jak to zrobić.

Answer 1

Można wypróbować następujące

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

lub jeśli wolisz używać Read more odnośnik

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

UPDATE

Ponieważ w Rails 4, link_to_function jest przestarzała i jest wskazane jest, aby nie powodować zakłóceń js, użyj następującej

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

Answer 2

Wiem, że przyłączam się do tej rozmowy nieco późno. Zajmowałem się tą samą kwestią, próbując powyższego rozwiązania, które działa dobrze. Jednak ukryte treści SEO, które zostały ukryte, nie zostały zindeksowane przez wyszukiwarki. Sprawdziłem też Lynx, a link nie może być przestrzegany (oczywiście). Tak ustalone dla tego rozwiązania przez Jed Foster | readmore.js - Lynx może odczytać go poprawnie i teraz czekam na indeks SE, aby zaktualizować i zobaczyć, czy mogę znaleźć się w wynikach wyszukiwania. Na wypadek, gdyby ktoś znalazł się w podobnej sytuacji ...