改变元素的高度

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>改变元素高度</title>
        <script type="text/javascript" src="./js/jquery-1.8.3.min.js"></script>
        <style type="text/css">
            body {
                margin: 0px;
                padding: 0px;
            }
            
            h2 {
                background-color: blue;
                color: white;
                margin: 0px;
            }
        </style>
        <script type="text/javascript">
            $(function(){
                $("h2").click(function(){
                    $(".txt").slideUp("slow");
                    $(".txt").slideDown("fast");
                })
            });
        </script>
    </head>

    <body>
        <div id="box">
            <h2>窗边的小豆豆</h2>
            <div class="txt">
                <p>本书讲述了作者上小学的一段真实的故事。</p>
                <p>作者因淘气被学校退学后,来到巴学园。在小林校长的爱护和引导下,一般人眼里"怪怪"的小豆豆逐渐成了一个大家都能接受的孩子,并奠定了她一生的基础。</p>
                <p>这本书不仅给世界千万读者无数的笑声和感动,而且为现代教育的发展注入了新的活力,成为20世纪全球最具影响的作品之一。</p>
            </div>
        </div>
    </body>

</html>

 

posted @ 2017-12-19 17:05  爱踢两键  阅读(153)  评论(0编辑  收藏  举报