我正在尝试解决有关博客页面概述的一个基本问题。
我想在概述页面上显示博客条目,但只想显示条目的一小段-然后用户可以使用“查看更多”按钮来展开文章。
目前,它仅针对一篇文章,并在另一篇文章上起作用。
这是代码
<% @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;
}
仅希望在博客条目中获得功能。
谢谢你的帮助...
每个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] 删除。
我来说两句