Java 脚本代码 (显示更多 - 显示更少） - Java Script code (Show More - Show Less )

我有一个代码，应该显示我的数据库中的数据（传记），但我正在努力将其放在一起，因此任何帮助将不胜感激。

我想做的是让我的页面只显示 500 个字符，比如说在简历上显示 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>

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

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

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

此外，使用onclick事件来实现这一点也很好

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

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

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

这将完成您正在寻找的内容：

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