html+js+css实现点击咱开显示（二）

红太狼 2021-12-19 02:47 109阅读 0赞

<!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.csdn.net/qq\_33205354/article/details/80292284][https_blog.csdn.net_qq_33205354_article_details_80292284]

### 效果如下； ###

![在这里插入图片描述][20190702101713933.png]

### 点击后； ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMDcyNTgz_size_16_color_FFFFFF_t_70]

[https_blog.csdn.net_qq_33205354_article_details_80292284]: https://blog.csdn.net/qq_33205354/article/details/80292284
[20190702101713933.png]: /images/20211219/b37853beec074e909620a2e5dd356326.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMDcyNTgz_size_16_color_FFFFFF_t_70]: /images/20211219/dc0ec8ef771243a29290db3422b8f713.png