RoR-.js的“查看更多”按钮（顶部）到“查看更少”按钮（底部）

Question

希望这是一个简单的。

我有一篇文章，正文内容被.js隐藏。 用户单击“查看更多”，将显示正文内容，并将按钮更改为“查看较少”

此刻功能正常，但按钮停留在同一位置。

打开后，“查看较少”按钮应位于内容主体下方的位置。

article.html.erb（隐藏的内容）

      <% article_id = "article-id-#{article.id}" %>
            <div class="col-md-12 post-body">
               <button class="btn btn-primary article-view-more" type="button" data-toggle="collapse"data-target="#<%= article_id %>" aria-expanded="false" aria-controls="article-expand">View More</button>   
             <div class="collapse" id="<%= article_id %>">
               <p><%= article.body.html_safe %></p>
             </div>
          </div>
        <%end%>

application.js（用于按钮操作）

$(document).ready(function(){
$('.article-view-more').click(function(){
        var $this = $(this);
        $this.toggleClass('article-view-more');
        if($this.hasClass('article-view-more')){
            $this.text('View More');
        } else {
            $this.text('View Less');
        }
    });
});

如下图所示。.按钮状态改变，但位置保持不变

希望这很容易，感谢您的协助

Answer 1

在我看来，最简单的方法是有两个按钮，第一个是在开始时可见，第二个是隐藏。 单击第一个按钮，先隐藏第二个，然后单击第二个，然后隐藏第二个。