JavaScript作业----(4)下拉列表(待完善)

最新推荐文章于 2024-04-20 00:11:47 发布

yoke743

最新推荐文章于 2024-04-20 00:11:47 发布

阅读量164

点赞数

本文链接：https://blog.youkuaiyun.com/yoke743/article/details/80512995

版权

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
 <title>Title</title>
    <style type="text/css">
        *{margin:0;padding:0;}
        body,ul,li,ol,dl,dd,p,h1,h2,h3,h4,h5,h6{ margin:0;}
        a{text-decoration:none;}
        img{border:none;}
        ol,ul{list-style:none;}
		#box{
		  margin:20px 500px;
		}
		ul{
		width:200px;
		height:200px;
		border:1px solid red;
		}
		li{
		  width:200px;
		  height:38px;
		  border:1px solid #ff9999;
		  background-color:#99ff66;
		  text-align:center;
		  line-height:30px;
		 }
		 .title{
		  text-align:left;
		  background:#cc66cc;

		 }
	   #box ul{
            overflow: hidden;
            height: 35px;
            border: 1px solid #bbb;
        }
        #box ul.show{
            height: auto;
        }
	</style>
 </head>
 <body>
    <div id="box">
	  <ul class="show">
	    <li class="title">同事</li>
	    <li>aaa</li>
	    <li>bbb</li>
	    <li>ccc</li>
	    <li>ddd</li>
	  </ul>
	  <ul>
	    <li class="title">好友</li>
	    <li>eee</li>
	    <li>fff</li>
	    <li>ggg</li>
	    <li>hhh</li>
	  </ul>

	</div>
    <script>
	var aUl = document.querySelectorAll("ul");
    aUl[0].onclick = function(){
                aUl[1].className = "";
                this.className = "show";
               
            };
    aUl[1].onclick = function(){
                aUl[0].className = "";
                this.className = "show";
               
            };
	
    
	</script>
 </body>
</html>