Javascript 创建一个；阅读更多“；扩展页面内容的链接

我想创建一个阅读更多的链接，扩展已经显示的段落，在同一页上显示整个文本。如果HTML5和CSS可以解决这个问题，我很乐意，但我认为需要某种类型的脚本

例如：

示例文本 Lorem ipsum dolor sit amet，是一位杰出的献身者。纳姆·波特托·费吉亚·伊普苏姆·奎斯·乌兰科珀。任何人的生命都是暂时的、巨大的。梅塞纳斯是一个乌拉姆科珀人。非利奥人的生命之路。

这是一个很好的方法。这是我的舌苔。这是一个整数，它是一个大整数。在faucibus中，Interdum和malesuada在第一次同侧前就出名了。时间累积性前庭静脉曲张。这是一个很好的例子。

阅读更多>>

我想正常的文本将与下面的“阅读更多>>”链接一起显示，然后点击链接后将显示粗体文本

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

---

提前感谢。

我已经创建了一个jQuery/JS脚本，可以实现以下功能： JSFiddle：

HTML:

---

另一种选择：

HTML：

Lorem ipsum Door sit amet，是一位杰出的领导者。纳姆·波特托·费吉亚·伊普苏姆·奎斯·乌兰科珀。任何人的生命都是暂时的、巨大的。梅塞纳斯是一个乌拉姆科珀人。非利奥人的生命之路

这是一个很好的方法。这是我的舌苔。这是一个整数，它是一个大整数。在faucibus中，Interdum和malesuada在第一次同侧前就出名了。时间累积性前庭静脉曲张。这是一个很好的例子

`

JS：

函数showMore（）{
//删除链接
document.getElementById（'link'）.parentElement.removeChild（'link'）；
//显示#更多
document.getElementById（'more'）.style.display=“block”；
}

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

---

Readmore.js所需的标记也非常轻量级和简单。不需要复杂的div集或硬编码类名，只需对包含文本块的元素调用

.readmore（）

，readmore.js会处理其余部分。

您可以通过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);

---

是的，它是。。。这只是一个小例子

示例文本
Lorem ipsum door sit amet，是一位杰出的领导者。纳姆·波特托·费吉亚·伊普苏姆·奎斯·乌兰科珀。任何人的生命都是暂时的、巨大的。梅塞纳斯是一个乌拉姆科珀人。非利奥人的生命之路

Sed eleifend-lectus-id-semper-acumsan。这是我的舌苔。这是一个整数，它是一个大整数。在faucibus中，Interdum和malesuada在第一次同侧前就出名了。时间累积性前庭静脉曲张。这是一个很好的例子
功能显示（ele）{
document.getElementById（ele.style.display='block'；
}

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

益智草

显示更多
洛勒姆

.更多{
显示：无；
}
#框。显示更多：选中+。更多{
显示：块；
}

在文本后输入该代码

<p><a onclick="javascript:ShowHide('HiddenDiv')">Read more</a></p>
<div class="mid" id="HiddenDiv" style="display: none;">
    <font face="Arial" size="+2" color="#306Eff" align="right">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
</div>
<script type="text/javascript">// <![CDATA[
function ShowHide(divId)
{
    if(document.getElementById(divId).style.display == 'none')
    {
        document.getElementById(divId).style.display='block';
    }
    else
    {
        document.getElementById(divId).style.display = 'none';
    }
}
// ]]></script>

阅读更多信息

剩下的文字在这里剩下的文字在这里
你的剩余文本在这里你的剩余文本在这里你的剩余文本在这里你的剩余文本在这里你的剩余文本在这里你的剩余文本在这里你的剩余文本在这里
// 

如果您想要这样的内容（在文本之后阅读更多元素），并且您还有多个动态元素：

每月前10 TB不收费。所有其他交通。。。阅读更多

HTML和CSS：

<small class="truncate_string_multilines block-with-text" id="multiline_block" data-initial_value="Every month first 10 TB are are not charged. All other traffic (incoming and outgoing) is charged <a href="" class="morelink_multi">Read more</a>">Every month first 10 TB are are not charged. All other traffic... <a href="#" class="morelink_multi">Read more</a></small> 

.block-with-text {
     height: 4.2em;
}
small {
    font-weight: 400;
    font-size: 0.875rem;
    display: inline-block;
    line-height: 1.4;
}

每月前10 TB不收费。所有其他交通。。。
.用文本块{
身高：4.2米；
}
小的{
字体大小：400；
字体大小：0.875rem；
显示：内联块；
线高：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(' ') + '... ' + "<a href=\"#\" class=\"morelink_multi\">" + moretext + "</a>";
            }
            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') + " <a href=\"#\" class='morelink_multi less'>"+ lesstext + "</a>");
    }
});

var initial_string=[]，wordArray=''；
函数ellipsizeTextBox（类名称）{
var el=document.getElementsByClassName（类名称）；
对于（i=0，len=el.length；iel[i]。离视）{
pop（）；
el[i].innerHTML=wordArray.join（“”）+’…”+“”；
}
el[i].setAttribute（“数据初始值”，初始字符串[i]）；
}
}
$（“body”）。在（“click”、“.morelink_multi”函数（）上{
var this_元素=$（this），
父链接的父链接=$（this.parent（）；
if（此_元素.hasClass（“较少”））{
此元素为removeClass（“较少”）；
html（moretext）；
_link.addClass（'block-with-text'）的父_；
ellipsizeTextBox（“截断字符串多行”）；
}否则{
_link.removeClass（'block-with-text'）的父_；
html（“”）的父项；
html的父链接（父链接数据（'initial_value'）+“”）；
}
});

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

• 将类设置为内容“div”
• 使用“”将单击显示内容与始终可见的内容分开
• 其他一切都将由css和js处理

HTML:

Lorem ipsum dolor sit amet，在vero eos和accusam以及justo duo dolores和ea Reum。斯特特·克里塔·卡斯德·古伯格伦。同侧阴唇
<div id="box">
    <p>Lorem ipsummy</p>
    <input type="checkbox" class="show-more"> Show more
    <div class="more">
        <p>Lorem</p>
    </div>
</div>

.more {
    display:none;
}

#box .show-more:checked + .more {
    display:block;
}

<p><a onclick="javascript:ShowHide('HiddenDiv')">Read more</a></p>
<div class="mid" id="HiddenDiv" style="display: none;">
    <font face="Arial" size="+2" color="#306Eff" align="right">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
</div>
<script type="text/javascript">// <![CDATA[
function ShowHide(divId)
{
    if(document.getElementById(divId).style.display == 'none')
    {
        document.getElementById(divId).style.display='block';
    }
    else
    {
        document.getElementById(divId).style.display = 'none';
    }
}
// ]]></script>

<small class="truncate_string_multilines block-with-text" id="multiline_block" data-initial_value="Every month first 10 TB are are not charged. All other traffic (incoming and outgoing) is charged <a href="" class="morelink_multi">Read more</a>">Every month first 10 TB are are not charged. All other traffic... <a href="#" class="morelink_multi">Read more</a></small> 

.block-with-text {
     height: 4.2em;
}
small {
    font-weight: 400;
    font-size: 0.875rem;
    display: inline-block;
    line-height: 1.4;
}

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(' ') + '... ' + "<a href=\"#\" class=\"morelink_multi\">" + moretext + "</a>";
            }
            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') + " <a href=\"#\" class='morelink_multi less'>"+ lesstext + "</a>");
    }
});

<div class="m-more-less-content">
Lorem ipsum dolor sit amet, <!--more--> 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.
</div>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Add Read More Link</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
    var maxLength = 300;
    $(".show-read-more").each(function(){
        var myStr = $(this).text();
        if($.trim(myStr).length > maxLength){
            var newStr = myStr.substring(0, maxLength);
            var removedStr = myStr.substring(maxLength, $.trim(myStr).length);
            $(this).empty().html(newStr);
            $(this).append(' <a href="javascript:void(0);" class="read-more">read more...</a>');
            $(this).append('<span class="more-text">' + removedStr + '</span>');
        }
    });
    $(".read-more").click(function(){
        $(this).siblings(".more-text").contents().unwrap();
        $(this).remove();
    });
});
</script>
<style>
    .show-read-more .more-text{
        display: none;
    }
</style>
</head>
<body>    
    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>
    <p class="show-read-more">This is a very long paragraph...</p>
</body>
</html>

<!-- The grid: three columns -->
<div class="row">
    <div class="column" onclick="openTab('b1');" style="background: green;">Box 1</div>
    <div class="column" onclick="openTab('b2');" style="background: blue;">Box 2</div>
    <div class="column" onclick="openTab('b3');" style="background: red;">Box 3</div>
</div>

<!-- The expanding grid (hidden by default) -->
<div id="b1" class="containerTab" style="display: none; background: green">
    <!-- If you want the ability to close the container, add a close button -->
    <span onclick="this.parentElement.style.display='none'" class="closebtn">x</span>
    <h2>Box 1</h2>
    <p>Lorem ipsum..</p>
</div>

<div id="b2" class="containerTab" style="display: none; background: blue">
    <span onclick="this.parentElement.style.display='none'" class="closebtn">x</span>
    <h2>Box 2</h2>
    <p>Lorem ipsum..</p>
</div>

<div id="b3" class="containerTab" style="display: none; background: red">
    <span onclick="this.parentElement.style.display='none'" class="closebtn">x</span>
    <h2>Box 3</h2>
    <p>Lorem ipsum..</p>
</div>

/* The grid: Three equal columns that floats next to each other */
.column {
  float: left;
  width: 33.33%;
  padding: 50px;
  text-align: center;
  font-size: 25px;
  cursor: pointer;
  color: white;
}

.containerTab {
  padding: 20px;
  color: white;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Closable button inside the image */
.closebtn {
  float: right;
  color: white;
  font-size: 35px;
  cursor: pointer;
}

// Hide all elements with class="containerTab", except for the one that matches the clickable grid column
function openTab(tabName) {
  var i, x;
  x = document.getElementsByClassName("containerTab");
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  document.getElementById(tabName).style.display = "block";
}