创建“阅读更多”链接，扩展页面上的内容

我想创建一个read more链接，它将扩展已经显示的段落，以在同一页面上显示整个文本。 如果这可以用HTML5和CSS解决，我希望如此，但我认为将需要某种类型的脚本。

例如：

示例文本

Lorem ipsum dolor坐着，精神上的精神。 Nam porttitor feugiat ipsum quis ullamcorper。 Nullam vitae velit vitae tortor semper tempor ac vitae magna。 Maecenas是一个ullamcorper neque。 Aliquam简历tortor luctus nisi rutrum eleifend非非利奥。

Sed eleifend lectus id semper accumsan。 Sed lobortis id ligula eget blandit。 整数interdum iaculis nunc，sed porttitor magna tincidunt in.Interdum et malesuada fames ac ante ipsum primis in faucibus。 Aliquam lobortis积累了临时性。 Aliquam sollicitudin pulvinar est，quis convallis tellus。

阅读更多>>

我希望通过下面的“阅读更多>>”链接显示普通文本，然后在单击链接后显示粗体文本。

我也想在隐藏部分有一个图像，这可能吗？

提前致谢。

Answer 1

一个香草JS替代品：

HTML：

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam porttitor feugiat ipsum quis ullamcorper. Nullam vitae velit vitae tortor semper tempor ac vitae magna. Maecenas a ullamcorper neque. Aliquam vitae tortor luctus nisi rutrum eleifend non non leo.
 
 
Sed eleifend lectus id semper accumsan. Sed lobortis id ligula eget blandit. Integer interdum iaculis nunc, sed porttitor magna tincidunt in. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam lobortis accumsan tempor. Aliquam sollicitudin pulvinar est, quis convallis tellus.
  
 Read More >>` 

JS：

 function showMore(){ //removes the link document.getElementById('link').parentElement.removeChild('link'); //shows the #more document.getElementById('more').style.display = "block"; } 

Answer 2

有一些非常感激的插件使用jquery。 这是我发现的

https://github.com/jedfoster/Readmore.js

Readmore.js所需的标记也非常轻量级且非常简单。 不需要复杂的div或硬编码类名，只需在包含文本块的元素上调用.readmore() ，Readmore.js负责其余部分。

Answer 3

我创造了一些易于使用的东西

• 将类设置为内容“div”
• 使用“<！ - more - >”将点击显示内容与始终可见的内容分开
• 其他一切都将由css和js照顾

HTML：

 
 Lorem ipsum dolor sit amet,  At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.  

见这里的例子

Answer 4

我已经创建了一个jQuery / JS脚本应该可以解决这个问题：JSFiddle： http ： //jsfiddle.net/Starfire1337/pL9ve/

HTML：

   // Notice the custom JS is included AFTER jQuery 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam porttitor feugiat ipsum quis ullamcorper. Nullam vitae velit vitae tortor semper tempor ac vitae magna. Maecenas a ullamcorper neque. Aliquam vitae tortor luctus nisi rutrum eleifend non non leo.
 Read More... 
 
Sed eleifend lectus id semper accumsan. Sed lobortis id ligula eget blandit. Integer interdum iaculis nunc, sed porttitor magna tincidunt in. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam lobortis accumsan tempor. Aliquam sollicitudin pulvinar est, quis convallis tellus.
  

在/js/site.js中：

 $(document).ready(function () { $('.nav-toggle').click(function () { var collapse_content_selector = $(this).attr('href'); var toggle_switch = $(this); $(collapse_content_selector).toggle(function () { if ($(this).css('display') == 'none') { toggle_switch.html('Show'); } else { toggle_switch.html('Hide'); } }); }); }); 

Answer 5

你可以这样做，通过Javascript更改CSS的属性。

 element.style.display = 'block'; 

JS代码

 function read_more() { document.getElementById('hidden-first').style.display = 'block'; } document.getElementById('read-more').addEventListener('click', read_more); 

在JSfiddle上看到这段代码

Answer 6

是的，这只是一个小例子http://jsfiddle.net/QDg4P/3/

 
 
Example text
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam porttitor feugiat ipsum quis ullamcorper. Nullam vitae velit vitae tortor semper tempor ac vitae magna. Maecenas a ullamcorper neque. Aliquam vitae tortor luctus nisi rutrum eleifend non non leo.
 read more  
Sed eleifend lectus id semper accumsan. Sed lobortis id ligula eget blandit. Integer interdum iaculis nunc, sed porttitor magna tincidunt in. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam lobortis accumsan tempor. Aliquam sollicitudin pulvinar est, quis convallis tellus.
  

Answer 7

这是一个纯HTML + CSS解决方案。 您可以使用CSS设置“显示更多”复选框以使其符合您的需求，包括隐藏复选框部分。

http://jsfiddle.net/T7eXL/

 
 
Lorem ipsummy
  Show more 
 
Lorem
 
 
 .more { display:none; } #box .show-more:checked + .more { display:block; } 

Answer 8

文字放完那段代码后

 
Read more
 
 YOUR REST OF THE TEXT HERE YOUR REST OF THE TEXT HERE YOUR REST OF THE TEXT HERE YOUR REST OF THE TEXT HERE YOUR REST OF THE TEXT HERE YOUR REST OF THE TEXT HERE YOUR REST OF THE TEXT HERE YOUR REST OF THE TEXT HERE 
  

Answer 9

如果你想要这样的东西（在文本之后阅读更多元素），你也有多个动态元素：

每个月前10 TB都不收取费用。 所有其他交通…阅读更多

HTML和CSS：

 Read more">Every month first 10 TB are are not charged. All other traffic... Read more .block-with-text { height: 4.2em; } small { font-weight: 400; font-size: 0.875rem; display: inline-block; line-height: 1.4; } 

JS和jQuery的

 var initial_string = [], wordArray = ''; function ellipsizeTextBox(class_name) { var el = document.getElementsByClassName(class_name); for (i = 0, len = el.length; i < len; i++) { initial_string[i] = el[i].innerHTML; wordArray = el[i].innerHTML.split(' '); while(el[i].scrollHeight > el[i].offsetHeight) { wordArray.pop(); el[i].innerHTML = wordArray.join(' ') + '... ' + "" + moretext + ""; } el[i].setAttribute("data-initial_value", initial_string[i]); } } $("body").on("click",".morelink_multi", function(){ var this_element = $(this), parent_of_link = $(this).parent(); if(this_element.hasClass("less")) { this_element.removeClass("less"); this_element.html(moretext); parent_of_link.addClass('block-with-text'); ellipsizeTextBox('truncate_string_multilines'); } else { parent_of_link.removeClass('block-with-text'); parent_of_link.html(''); parent_of_link.html(parent_of_link.data('initial_value') + " "+ lesstext + ""); } });