js点击弹出div菜单，让它慢慢展开怎样实现呢

qingwadaxia_1 2017-06-27 03:38:42

<!doctype html>

<html lang="en">

 <head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 

  <title>Document</title>

  <style>

		*{padding:0;margin:0;list-style:none;text-decoration:none;}

		#cc{background:#000;height:60px;position:relative;border-bottom: 1px solid #ccc;}

		#bb{height: 24px;display: block;padding-top: 18px;width: 8%;position:absolute;right:0;right: 2%;}

		#cc span{background:#fff;width:100%;height:4px;display:block;}

		#cc span:nth-child(2){margin-top:6px;}

		#cc span:nth-child(3){margin-top:6px;}

		#aa{background:#000;height:204px;display:none;}

		#aa ul li{height:40px;line-height:40px;border-bottom:1px solid #ccc;}

		#aa ul li:nth-child(5){border-bottom:none;}

		#aa ul li a{color:#fff;display:block;text-indent:2em;}

  </style>

 </head>

 <body>

  <div id="cc">

	<a id="bb" href="javasrcipt:;">

		<span></span>

		<span></span>

		<span></span>

	</a>

  </div>

  <div id="aa">

	<ul>

		<li><a href="#">xiaoming</a></li>

		<li><a href="#">zhanghong</a></li>

		<li><a href="#">guanyuzhang</a></li>

		<li><a href="#">lvbugege</a></li>

		<li><a href="#">zhaoyunjie</a></li>

	</ul>

  </div>

  <script>

	var bb = document.getElementById("bb");

	var aa = document.getElementById("aa");

	var b1 = true;

	bb.onclick=function(){

		if (b1)

		{

			aa.style.display="block";

			b1=false;

		}else{

			aa.style.display="none";

			b1=true;

		}

	}





  </script>





	

 </body>

</html>

上面的代码可以点击弹出显示但是是直接弹出显示没什么过渡效果想要有那种平滑过渡的效果慢慢展开和慢慢隐藏

...全文

1004 7 打赏收藏转发到动态举报

写回复

用AI写文章

7 条回复

切换为时间正序

请发表友善的回复…

发表回复

斯洛文尼亚旅游 2017-06-27

打赏
举报

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            list-style: none;
            text-decoration: none;
        }

        #cc {
            background: #000;
            height: 60px;
            position: relative;
            border-bottom: 1px solid #ccc;
        }

        #bb {
            height: 24px;
            display: block;
            padding-top: 18px;
            width: 8%;
            position: absolute;
            right: 0;
            right: 2%;
        }

        #cc span {
            background: #fff;
            width: 100%;
            height: 4px;
            display: block;
        }

            #cc span:nth-child(2) {
                margin-top: 6px;
            }

            #cc span:nth-child(3) {
                margin-top: 6px;
            }

        #aa {
            transition: height 0.3s linear;
            background: #000;
            height: 0;
            overflow:hidden
        }

            #aa ul li {
                height: 40px;
                line-height: 40px;
                border-bottom: 1px solid #ccc;
            }

                #aa ul li:nth-child(5) {
                    border-bottom: none;
                }

                #aa ul li a {
                    color: #fff;
                    display: block;
                    text-indent: 2em;
                }
    </style>
</head>
<body>
    <div id="cc">
        <a id="bb" href="javascript:;">
            <span></span>
            <span></span>
            <span></span>
        </a>
    </div>
    <div id="aa">
        <ul>
            <li><a href="#">xiaoming</a></li>
            <li><a href="#">zhanghong</a></li>
            <li><a href="#">guanyuzhang</a></li>
            <li><a href="#">lvbugege</a></li>
            <li><a href="#">zhaoyunjie</a></li>
        </ul>
    </div>
    <script>
        var bb = document.getElementById("bb");
        var aa = document.getElementById("aa");
        var b1 = true;
        bb.onclick = function () {
            if (b1) {
                aa.style.height='204px'
                b1 = false;
            } else {
                aa.style.height = '0'
                b1 = true;
            }
        }


    </script>



</body>
</html>