readmore按钮或显示/隐藏php

Question

我只想显示200个单词，并使用显示/隐藏按钮显示整个帖子，并将帖子隐藏为200个单词。 文本在变量上，我不知道该怎么做。 我尝试使用javascript，但无法隐藏帖子内容。

这里是：

<div id="test">content</div>
<script>
    var str = "<?=$row[3]?>"; 
    var test = str.substr(0, 700);
    document.getElementById('test').innerHTML = test;
</script>
<p id="demo"></p>
<script>
    function myFunction() {
        var str = "<?=$row[3]?>"; 
        var test = str.substr(700);
        document.getElementById("demo").innerHTML = test;
    }
</script>
<button onclick="myFunction()">Click me</button>

Answer 1

您可以在简单的CSS中做到这一点

不需要其他

隐藏您的溢出文字

根据需要修改CSS中的代码

 /* css only show/hide */ html { background: white } * { margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } figure { margin: 0 0 1.3rem 0; -webkit-transition: .125s linear; -moz-transition: .125s linear; -ms-transition: .125s linear; -o-transition: .125s linear; transition: .125s linear; } figure img { max-width: 100%; height: auto; } body { max-width: 480px; width: 90%; margin: 3em auto; font-size: 75%; line-height: 1.3rem; font-family: sans-serif; position: relative; *zoom: 1; } body:before, body:after { content: ""; display: table; } body:after { clear: both } p { margin-bottom: 1.3rem } article { margin-bottom: 3rem; position: relative; *zoom: 1; } article:before, article:after { content: ""; display: table; } article:after { clear: both } article figure { float: left; width: 32.5%; } article section:first-of-type { float: right; width: 62.5%; } article section:last-of-type { display: none; visibility: hidden; } section { -webkit-transition: .125s linear; -moz-transition: .125s linear; -ms-transition: .125s linear; -o-transition: .125s linear; transition: .125s linear; } input[type=checkbox] { border: 0; clip: rect(0 0 0 0); height: 1px; width: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; } [for="read_more"] { position: absolute; bottom: -3rem; left: 0; width: 100%; text-align: center; padding: .65rem; box-shadow: inset 1px 1px rgba(0, 0, 0, 0.1), inset -1px -1px rgba(0, 0, 0, 0.1); } [for="read_more"]:hover { background: rgba(0,0,0,.5); color: rgb(255,255,255); } [for="read_more"] span:last-of-type { display: none; visibility: hidden; } input[type=checkbox]:checked ~ section { display: block; visibility: visible; width: 100%; } input[type=checkbox]:checked ~ figure { width: 100% } input[type=checkbox]:checked ~ [for="read_more"] span:first-of-type { display: none; visibility: hidden; } input[type=checkbox]:checked ~ [for="read_more"] span:last-of-type { display: block; visibility: visible; } 

 <article> <input type="checkbox" id="read_more" role="button"> <label for="read_more" onclick=""><span>Read More</span><span>Hide This Shit!</span></label> <figure> <img src="http://www.surprisegiftz.com/images/media/ceramicphototiles.jpg" alt="Example text" /> </figure> <section> <p>The function of a paragraph is to mark a pause, setting the paragraph apart from what precedes it. If a paragraph is preceded by a title or subhead, the indent is superfluous and can therefore be omitted</p> </section> <section> <p>The function of a paragraph is to mark a pause, setting the paragraph apart from what precedes it. If a paragraph is preceded by a title or subhead, the indent is superfluous and can therefore be omitted</p> <p>The function of a paragraph is to mark a pause, setting the paragraph apart from what precedes it. If a paragraph is preceded by a title or subhead, the indent is superfluous and can therefore be omitted</p> </section> </article> 

Answer 2

您不需要为简短内容和完整内容添加两个单独的元素。 只需创建一个超链接，该超链接将调用脚本以显示隐藏的全部和简短内容。

在html下面使用

<div id="test">content</div>
<div >
    <a href="#" id="showmore" onClick="return showMore(this);" >more</a>

</div>

和下面的脚本

var str = "<?=$row[3]?>"; 
var test = str.substr(0, 200);
document.getElementById('test').innerHTML = test;

function showMore(obj){
    if(obj.text == 'more'){
document.getElementById('test').innerHTML = str;
        obj.text = "less";
    }else{
    document.getElementById('test').innerHTML = test;
         obj.text = "more";
    }
}

希望对你有帮助