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

希望對你有幫助