Question

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

例如：

示例文本

Lorem ipsum dolor坐下来，精致的adipistur elit。 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。

阅读更多＆gt;＆gt;

我希望通过＆＃34;阅读更多＆gt;＆gt;＆＃34;显示正常文字。链接如下，然后点击链接后会显示粗体文字。

我还希望在隐藏部分中有一个图像，这可能吗？

提前致谢。

Answer 1

一个香草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. 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>`

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：

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

请参见示例here

Answer 4

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

HTML：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script src="/js/site.js"></script> // Notice the custom JS is included AFTER jQuery
<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>
<a href="#collapse" class="nav-toggle">Read More...</a>
<div id="collapse" 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>
</div>

和/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);

See this code on JSfiddle

Answer 6

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

<div>
<h1>Example text</h1>
<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><a href="#" onclick="show('example1')"> read more </a>
<p id="example1" style="display:none; font-weight: bold"><img src="http://tux.crystalxp.net/png/kami23-flower-tux-4037.png"/>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>

<script>
 function show(ele){
     document.getElementById(ele).style.display = 'block';   
}
</script>

Answer 7

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

http://jsfiddle.net/T7eXL/

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

Answer 8

在文本后加上该代码

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

Answer 9

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

每个月的前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;
}

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>");
    }
});

Answer 10

更高级的版本，如果您的文本是动态的或来自数据库。

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

Answer 11

参考https://www.w3schools.com/howto/howto_js_expanding_grid.asp

另一个香草 HTML、javascript 和 css 示例，如果你想要这样的东西，并在点击框 2 或框 3 时更改框。此时我只在展开的 div 上放置了十字按钮，但您可以放置再次单击该框即可返回：

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>

CSS：

/* 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;
}

JS：

// 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";
}

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

示例文本

11 个答案: