jquery javascript 展开收起

最新推荐文章于 2022-06-08 15:37:30 发布

Lo-ra

最新推荐文章于 2022-06-08 15:37:30 发布

阅读量329

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/yana_loo/article/details/53787316

本文介绍如何使用JavaScript和jQuery实现网页中常见的阅读更多及收起内容的效果。通过DOM操作来截断显示文本并添加交互按钮，使得用户可以展开或隐藏长文本。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JavaScript：

一：

<script>
    function showContent() {
        var main = document.getElementById("main");
        var content = main.innerHTML;
        var newContent = document.createElement("div");
        var btn = document.createElement("a");
        newContent.innerHTML = content.substring(0,200);
        btn.href="###";
        btn.innerHTML=content.length > 200 ? "read more" : "";
        btn.onclick=function () {
            if(btn.innerHTML=="read more"){
                btn.innerHTML="Close";
                newContent.innerHTML=content;
            }else{
                btn.innerHTML="read more";
                newContent.innerHTML=content.substring(0,200);
            }
        }
        main.innerHTML="";
        main.appendChild(newContent);
        main.appendChild(btn);
    }
    showContent()
</script>

HTML

<div id=main>
   ...
</div>

jQuery 写法：

<script>
    $(document).ready(function () {
        var main= $("#main").html();
        var newMain = main.substring(0,200);
        if(main.length>200){
            $("#close").find('a').html("read more");
            $("#main").html(newMain+"...");
        }
        $("#close").click(function () {
            if($("#close").find('a').html()=="read more"){
                $("#close").find('a').html("close");
                $("#main").html(main);
            }else{
                $("close").find('a').html("read more");
                $("#main").html(newMain+"...");
            }
        })
    })
</script>

HTML

<div id=main>
   ...
</div>