阅读有关数据库结果的更多信息 - Read more on Database result

嗨，我的代码非常简单，但出于设计目的，Id 喜欢保持一切整洁，目前我正在拉出所有描述，就像有些可能是巨大的，其他人可能很小，无论如何为了公平起见，我决定制作一个阅读更多按钮，一旦我单击它，只需展开文本，例如，所以以某种方式让它显示之后的前 160 个字符......然后阅读更多链接按钮，当您单击它时它会展开并显示整个文本这是我现在使用的脚本：

<p><?PHP echo $thismovie['description']; ?></p> <div style="text-align:right">

所以我想知道这是如何完成的，如果可能的话只使用 javascript，谢谢！

虽然你当然可以使用PHP，但另一种方法是正确使用css的文本溢出属性。

这种方法将减轻服务器的压力，尤其是当页面上有一堆描述时。使用 PHP 连接每一个是没有效率的，也不是正确的方法。

删除类要简单得多。当您想要显示更少时，您可以重新添加它。

<style>
     .ellipsis {
         white-space: nowrap; 
         text-overflow: ellipsis; 
         overflow: hidden; 
         height: 14px;
     }
     .description {
         width: 300px;
         background: #ccc; 
         padding: 3px;
         margin-top: 30px;
         margin-bottom: 0;
     }
</style>
<!-- It is likely you would use a PHP loop for this but for illustration 
     purposes I've listed them out -->
<p class="description ellipsis"><?=$movie[0]['description']?></p>
<a href="#" class="read-more">Read More</a>
<p class="description ellipsis"><?=$movie[1]['description']?></p>
<a href="#" class="read-more">Read More</a>
<p class="description ellipsis"><?=$movie[2]['description']?></p>
<a href="#" class="read-more">Read More</a>
<!-- use as many as you want with no additional strain on server. -->

随着JQUERY...http://jsfiddle.net/kx2nbv3z/

<!-- Include jQuery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
    $(document)
        .on('click','.read-more',function() { 
            $(this).removeClass('read-more').addClass('show-less').html('Show Less').prev('.description').removeClass('ellipsis'); 
        })
        .on('click','.show-less',function() { 
            $(this).removeClass('show-less').addClass('read-more').html('Read More').prev('.description').addClass('ellipsis'); 
        })
    ;
</script>

使用纯 JAVASCRIPT...http://jsfiddle.net/8wsbw0u8/

<script>

if (document.body.addEventListener) {
    document.body.addEventListener('click',yourHandler,false);
}
else {
    document.body.attachEvent('onclick',yourHandler);//for IE
}
function yourHandler(e) {
    e = e || window.event;
    var target = e.target || e.srcElement;
    prev = target.previousSibling.previousSibling;
    if (target.className.match(/read-more/)) {
        target.className="show-less";
        target.innerHTML = "Show Less";
        prev.setAttribute("class","description");
        console.log(prev);
    }
    else if (target.className.match(/show-less/)) {
        target.className="read-more";
        target.innerHTML = "Read More";
        prev.setAttribute("class","description ellipsis");
    }
}
</script>

for PHP 方式：

$firstdesc=substr($thismovie['description'], 0, 160);

当阅读更多按下时。

$totaldesc=substr($thismovie['description'], 160);

当然，你也可以用Javascript来做。

使用CSS样式'text-overflow： ellipsis; 和 jquery 以获得完整功能。

$('#read-more').click(function() {
    $('#description').css('width','100%');
});

#description {
    white-space: nowrap; 
    width: 12em; 
    overflow: hidden;
    text-overflow: ellipsis; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="description">This is some long text that will not fit in the box</div> <a id="read-more" href="#">Read More</a>