创建“读取更多”链接，扩展页面上的内容 [英] Creating a "read more" link that extends the content on the page

问题描述

我想创建一个阅读更多的链接，它将扩展已经显示的段落，在同一页面上显示整个文本。如果这可以用HTML5和CSS解决，我想这样，但我认为将需要一些类型的脚本。

例如：

示例文本

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。非等位基因的等位基因。

sed elefend 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。长春花碱积累。阅读更多>>

$ b >我希望正常文本与下面的阅读更多>>链接一起显示，然后点击链接后会显示粗体文本。

我

提前感谢。

解决方案

一个vanilla JS替代方法：

HTML：

 < p> 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。等分檀香樟子柚子非非利奥。< / p> 
< div id =morestyle =display：none;> 
< p> Sed elefend 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 sollicitudin pulvinar est，quis convallis tellus。< / p> 
< img .... /> 
< / div> 
< a href =javascript：showMore（）id =link>阅读更多>>< / a>`
  

JS：

  function showMore （）{
 // remove the link 
 document.getElementById（'link'）。parentElement.removeChild（'link'）; 
 //显示#more 
 document.getElementById（'more'）。style.display =block; 
} 
  

I would like to create a read more link that would extend a paragraph already being shown to reveal the entire text on the same page. If this could be solves with HTML5 and CSS, I would like that, but I assume some type of script will be needed.

For example:

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.

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

I would like the normal text to be shown with the "Read More >>" link below, and then the bold text will be revealed after clicking the link.

I also want to have an image in the hidden section, would this be possible?

Thanks in advance.

解决方案

A vanilla JS alternative:

The HTML:

<p>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.</p>
<div id="more" style="display:none;">
    <p>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.</p>
    <img..../>
</div>
<a href="javascript:showMore()" id="link">Read More >></a>`

The JS:

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

这篇关于创建“读取更多”链接，扩展页面上的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！