html+js+css实现点击展开显示

Dear 丶 2021-12-18 22:15 452阅读 0赞

### 实现思路：首先我们需要定义一个容器来存放内容；将溢出内容先隐藏，当点击按钮或文字时使原先定义的容器变大，并且能放下所有内容。 ###

### 代码如下： ###

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <title>下拉与收起</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">
            	body
           {
               margin: 0 auto;
               padding: 0;
           }
           a:focus
           {
               outline: none;
           }
           #showhide
           {
               background: yellow;
               color: white;
               width: 600px;
               display: block;
               margin: 0 auto;
               padding: 5px;
               font-size: 20px;
                
               height: auto;
               font-family: "微软雅黑";
           }
           .slide
           {
               margin: 0;
               padding: 0;
               width: 600px;
               border-top: solid 4px gray;
               margin: 0 auto;
           }
          .btn-slide
           {
               background: gray;
               text-align: center;
               width: 120px;
               height: 30px;
               padding: 10px 10px 0 0;
               margin: 0 auto;
               display: block;/*块级元素*/
               color: #fff;
               text-decoration: none;/*去掉下划线*/
           }
            </style>
            
            <script type="text/javascript">
            	$(document).ready(function () {
               $(".btn-slide").click(function () {
                   $("#show").slideToggle();
               });
           });
            </script>
          
        </head>
        <body>
            <div id="showhide">
                <p>窗前明月光</p>
                <p>疑似地上霜</p>
                <p>举头望明月</p>
                <div id="show" style="display:none;">
                    <p>
                        低头思故乡
                    </p>
                     
                    <p>
                    直至你在失望与孤独中死去
                    </p>
                </div>
                 
            </div>
             <p class="slide">
                <a href="#" class="btn-slide">展开
                </a>
             </p>
     
     
        </body>
    </html>

### 效果如下： ###

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMDcyNTgz_size_16_color_FFFFFF_t_70]: /images/20211219/97e6e90c58b345e5b99873ce7236dd0d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMDcyNTgz_size_16_color_FFFFFF_t_70 1]: /images/20211219/7602f549a75a42e6a790df48856ad9fb.png