html+js+css实现点击咱开显示（二）_html+css+js点击按钮将对应部分放置在屏幕内-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_40072583/article/details/94432467

本文档展示了如何使用HTML、CSS和JavaScript实现诗歌《你是人间的四月天》的交互式阅读体验，通过点击按钮可以展开或收起诗歌内容。

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"
        integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous">
        </script>
    <style type="text/css">
        div {
            font-weight: bold;
            color: dark;
        }

        #item2 {
            display: none;
        }
        #item3{
            cursor: pointer;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#item3").click(function () {
                if ($("#item2").css("display") == "none") {
                    $("#item2").css("display", "block");
                    
                } else {
                    $("#item2").css("display", "none");
                }
            });
        });
        // function xxx(){
        //     document.getElementById("#item3").
        // }
    </script>

</head>

<body>
    <h1>你是人间的四月天</h1>
    <h2>【作者】林徽因 现代</h2>
    <div id="item1">
        我说你是人间的四月天；<br />
        笑响点亮了四面风；<br />
        轻灵在春的光艳中交舞着变。<br />
    </div>
    <div id="item2">
        你是四月早天里的云烟，<br />
        黄昏吹着风的软，<br />
        星子在无意中闪，细雨点洒在花前。<br />
        那轻，那娉婷你是，<br />
        鲜妍百花的冠冕你戴着，<br />
        你是天真，庄严，你是夜夜的月圆。<br />
        雪化后那片鹅黄，你像；<br />
        新鲜初放芽的绿，你是；<br />
        柔嫩喜悦水光浮动着你梦期待中白莲。<br />
        你是一树一树的花开，<br />
        是燕在梁间呢喃，——你是爱，是暖，<br />
        是希望，你是人间的四月天！<br />
    </div>
   <p id="item3" onclick="this.innerHTML=(this.innerHTML=='更多'?'收起':'更多');">更多</p>
    


</body>

</html>

this.innerHTML=(this.innerHTML==‘更多’?‘收起’:‘更多’);" 点击标签改变标签内容innerHTML

比较复杂的办法：

<p id="btn" onclick="changeVal(this);" >展开</p>

<script>    
function changeVal(obj){
    var val=document.getElementById("btn");
    if(val.innerHTML=="展开"){
        obj.innerHTML="收缩";
    }else if(val.innerHTML=="收缩"){
        obj.innerHTML="展开";
    }
}
</script>

原文：https://blog.youkuaiyun.com/qq_33205354/article/details/80292284