javascript简单的隐藏显示DIV解决方案

引入jquery

  <script src="js/jquery.min.js"></script>

CSS

        #btn {
            display: block;
            background: #1E9FFF;
            border-radius: 5px;
            width: 100px;
            height: 25px;
            cursor: pointer;
            color: #fff;
            margin: auto 0;
            padding: 5px;
            text-align: center;
        }

        #content {
            display: none;
            padding: 10px;
            width: 200px;
            height: 300px;
            border: 1px #1a1a1c solid;
            border-radius: 10px;
            margin: 10px 0;
        }

HTML

<div><span id="btn">显示内容</span></div>
<div id="content">
    床前明月光，疑是地上霜。举头望明月，低头思故乡。
    <p>chuáng qián míng yuè guāng ，yí shì dì shàng shuāng 。
        jǔ tóu wàng míng yuè ，dī tóu sī gù xiāng 。</p>
</div>

js

    $(function () {
        $("#btn").click(function () {
            $("#content").fadeToggle(1000);

            //操作按钮;
            var c = $("#btn").html();
            if (c == "显示内容") {
                $("#btn").html("隐藏内容");
            } else {
                $("#btn").html("显示内容");
            }
        })
    })

Done!