RoR-具有“查看更多信息”的博客条目会展开和折叠,仅指向第一篇文章

Biggztyle

我正在尝试解决有关博客页面概述的一个基本问题。

我想在概述页面上显示博客条目,但只想显示条目的一小段-然后用户可以使用“查看更多”按钮来展开文章。

目前,它仅针对一篇文章,并在另一篇文章上起作用。

这是代码

    <% @articles.each do |article|%>
    <div class="col-md-12">
        <%= image_tag article.banner.url (:banner)%>
        <h2><%= article.title %></h2>
        <p><%= article.introduction %></p>

        <div>
            <input type="checkbox" class="read-more-state" id="article-item" />
            <p class="read-more-wrap"><span class="read-more-target"><%= article.body %></span></p>
            <label for="article-item" class="read-more-trigger"></label>
        </div>

    </div>
    <%end%>
    </div>

但是id =“ article item”只能在最新条目上使用一次,如何使它在所有博客条目上都可以使用?

CSS现在可以使用了,不必担心样式。

.read-more-state {
  display: none;
}

.read-more-target {
  opacity: 0;
  max-height: 0;
  font-size: 0;
  transition: .25s ease;
}

.read-more-state:checked ~ .read-more-wrap .read-more-target {
  opacity: 1;
  font-size: inherit;
  max-height: 999em;
}

.read-more-state ~ .read-more-trigger:before {
  content: 'View More';
}

.read-more-state:checked ~ .read-more-trigger:before {
  content: 'View Less';
}

.read-more-trigger {
  cursor: pointer;
  display: inline-block;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 30px;
    padding-right: 30px;
    font-family:'Lato';
    font-size: 18px;
    background-color: #55c7eb;
    cursor: pointer;
    border-radius: 0px;
    border: 0;
}

仅希望在博客条目中获得功能。

谢谢你的帮助...

雷吉B

每个HTMLid在页面内应该是唯一的。如果某个页面上触发了某些内容,则id浏览器将仅通过它来查找第一个-因为不应再出现其他内容。在您的示例中-只有第一篇文章受到影响,而第一篇文章受到的影响id article-item

因此,如果您有许多通过物品检测到的物品,则id需要为每个物品赋予其唯一的属性(在页面内)id最简单的方法是增加它。在您的示例中,我假设每篇文章都有id这样的用法:

<% article_id = "article-#{article.id}" %>
<div>
  <input type="checkbox" class="read-more-state" id="<%= article_id %>" />
  <p class="read-more-wrap"><span class="read-more-target"><%= article.body %></span></p>
  <label for="<%= article_id %>" class="read-more-trigger"></label>
</div>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章