Question

我有一个代码，可以从我的数据库中显示数据（传记），但我很难将它们整合在一起，所以任何帮助都会非常感激。

我想要做的是让我的页面显示只让我们说生物上有500个字符，然后当你点击显示更多部分它会将内容字符扩展到最充分。我还需要我的框，我的内容也会显示在其中。现在，当点击显示更多我得到完全相同的文本两次，但不是我的数据库中的其余文本。比你大家的帮助，这是我的代码：

<h5>About:</h5>  
    <script type="text/javascript" language="JavaScript"><!--
    function HideContent(d) {
    document.getElementById(d).style.display = "none";
    }
    function ShowContent(d) {
    document.getElementById(d).style.display = "list-item";
    }
    function ReverseDisplay(d) {
    if(document.getElementById(d).style.display == "none") { document.getElementById(d).style.display = "block"; }
    else { document.getElementById(d).style.display = "none"; }
    }
    //--></script><p><?php echo $row->biography; ?><a href="javascript:ShowContent('uniquename')" backgorund="orange">
    ...show more
    </a></p><br/>
    <a href="javascript:ShowContent('uniquename')" backgorund="orange">

    </a>
    <div id="uniquename" style="display:none;">
    <p><?php echo $row->biography; ?></p>
    <a href="javascript:HideContent('uniquename')">
    show less
    </a>
    </div>

Answer 1

当您显示所有内容时，您还应隐藏第一个内容：

<a href="javascript:ShowContent('uniquename'); this.style.display = 'none'">
Show more....
</a>

点击this.style.display = "none"时添加show more的主要区别。

使用onclick事件来实现此目的也很好

Answer 2

嗯，这肯定会发生，因为您在#uniquename元素中打印完全相同的内容。

如果要在第一段中截断文本以仅显示其中的一小部分，则可以使用PHP的substr函数。在以下示例中，我使用了10个字符的限制：

<?php
$content = 'lorem ipsum dolor sit amet';
if (strlen($content) > 10) {
    echo substr($content, 0, 10) . '&hellip;';
} else {
    echo $content;
}
?>

Answer 3

这将满足您的需求：

<body>
    <p id="Content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>
    <script>
        (function (){
            var content = document.getElementById("Content").innerHTML;
            var shown;
            var hidden;
            var html;
            if (content.length > 500) {
                shown = content.substring(0, 499);
                hidden = content.substring(500, content.length);
                html = "<div id=\"shown\">" + shown + "<span id=\"showText\" onclick=\"showMore()\" style=\"cursor:pointer\">Show More</span></div><div id=\"hidden\" style=\"display:none;\">" + hidden + "<span id=\"hideText\" onclick=\"showLess()\" style=\"cursor:pointer;display:none;\">Show Less</span></div></div>"
            }
            else {
                shown = content;
                html = "<div id=\"shown\">" + shown + "</div>"
            }
            document.getElementById("Content").innerHTML = html;
        })()
        var showMore = function (){
            document.getElementById("hidden").setAttribute("style", "display:block;");
            document.getElementById("showText").setAttribute("style", "display:none;");
            document.getElementById("hideText").setAttribute("style", "display:block;cursor:pointer;");
        }
        var showLess = function () {
            document.getElementById("hidden").setAttribute("style", "display:none;");
            document.getElementById("showText").setAttribute("style", "display:block;cursor:pointer;");
            document.getElementById("hideText").setAttribute("style", "display:none;");
        }
    </script>    
</body>

Javascript代码（显示更多 - 显示更少）

3 个答案: