<!DOCTYPE html><html> ???<head> ???????<meta charset="UTF-8"> ???????<title></title> ???????<style type="text/css"> ???????????*{ ???????????????margin: 0 auto; ???????????????padding: 0; ???????????} ???????????.a{ ???????????????width: 200px; ???????????????height: 80px; ???????????????text-align: center; ???????????????line-height: 80px; ???????????????background-color: red; ???????????????color: white; ???????????} ???????????ul{ ???????????????list-style: none; ???????????????overflow: hidden; ???????????} ???????????li{ ???????????????width: 180px; ???????????????height: 40px; ???????????????text-align: center; ???????????????line-height: 40px; ???????????????color: blue; ???????????????background-color: #008000; ???????????} ???????????#di2{ ???????????????width: 800px; ???????????????height: 300px; ???????????????text-align: center; ???????????????line-height: 40px; ???????????????margin-top: 50px; ???????????????border: 1px solid red; ???????????} ???????????.di21{ ???????????????width: 198px; ???????????????height: 300px; ???????????????text-align: center; ???????????????line-height: 40px; ???????????????border: 1px solid red; ???????????????float: left; ???????????} ???????????.di22{ ???????????????width: 198px; ???????????????height: 220px; ???????????????text-align: center; ???????????????line-height: 40px; ???????????????border: 1px solid red; ???????????????float: left; ???????????} ???????????.c{ ???????????????width: 200px; ???????????????height: 80px; ???????????????text-align: center; ???????????????line-height: 80px; ???????????????float: left; ???????????????background-color: red; ???????????} ???????????#di3{ ???????????????width: 400px; ???????????????height: 80px; ???????????????border: 1px solid red; ???????????} ???????????.d31{ ???????????????width: 100px; ???????????????height: 80px; ???????????????float: left; ???????????????text-align: center; ???????????????line-height: 80px; ???????????} ???????????#e1{ ???????????????width: 450px; ???????????????height: 400px; ???????????????border: 1px solid red; ???????????????text-align: center; ???????????????line-height: 80px; ???????????????display: block; ???????????} ???????????#e2{ ???????????????width: 450px; ???????????????height: 400px; ???????????????border: 1px solid red; ???????????????text-align: center; ???????????????line-height: 80px; ???????????????display: none; ???????????} ???????????#e3{ ???????????????width: 450px; ???????????????height: 400px; ???????????????border: 1px solid red; ???????????????text-align: center; ???????????????line-height: 80px; ???????????????display: none; ???????????} ???????????#e4{ ???????????????width: 450px; ???????????????height: 400px; ???????????????border: 1px solid red; ???????????????text-align: center; ???????????????line-height: 80px; ???????????????display: none; ???????????} ???????????#f1{ ???????????????width: 400px; ???????????????height: 5px; ???????????????border: 1px solid #6610F2; ???????????????margin-top: 100px; ???????????} ???????????#ff{ ???????????????width: 0px; ???????????????height: 5px; ???????????????background-color: red; ???????????????float: left; ???????????????transition: 5s; ???????????} ???????????#h1{ ???????????????width: 200px; ???????????????height: 100px; ???????????????border: 1px solid red; ???????????????text-align: center; ???????????????line-height: 80px; ???????????????color: black; ???????????} ???????????.h11{ ???????????????width: 100px; ???????????????height: 40px; ???????????????text-align: center; ???????????????line-height: 40px; ???????????????background-color: red; ???????????????color: black; ???????????????float: left; ???????????} ???????????.h12{ ???????????????width: 100px; ???????????????height: 20px; ???????????????text-align: center; ???????????????line-height: 20px; ???????????????background-color: blue; ???????????????color: black; ???????????????float: left; ???????????} ???????</style> ???</head> ???<body> ???????<div class="a" onclick="a(‘a1‘)">标题1</div> ???????????<ul id="a1" style="height: 0px;"> ???????????????<li>内容1</li> ???????????????<li>内容2</li> ???????????????<li>内容3</li> ???????????</ul> ???????????????<div class="a" onclick="a(‘a2‘)">标题2</div> ???????????<ul id="a2" ?style="height: 0px;"> ???????????????<li>内容1</li> ???????????????<li>内容2</li> ???????????????<li>内容3</li> ???????????</ul> ???????????????<div class="a" onclick="a(‘a3‘)">标题3</div> ???????????<ul id="a3" ?style="height: 0px;"> ???????????????<li>内容1</li> ???????????????<li>内容2</li> ???????????????<li>内容3</li> ???????????</ul> ???????????????????????????????????????????<div id="di2"> ???????????<div class="di21"> ???????????????<div class="c" onmousemove="c(‘c1‘)">标题</div> ???????????????<div class="di22"> ???????????????????<ul id="c1" ?style="height: 0px;"> ???????????????????<li>内容1</li> ???????????????????<li>内容2</li> ???????????????????<li>内容3</li> ???????????????????</ul> ???????????????</div> ???????????????????????????</div> ???????????<div class="di21"> ???????????????<div class="c" onmousemove="c(‘c2‘)">标题</div> ???????????????<div class="di22"> ???????????????????<ul id="c2" ?style="height: 0px;"> ???????????????????<li>内容1</li> ???????????????????<li>内容2</li> ???????????????????<li>内容3</li> ???????????????????</ul> ???????????????</div> ???????????????????????????</div> ???????????<div class="di21"> ???????????????<div class="c" onmousemove="c(‘c3‘)">标题</div> ???????????????<div class="di22"> ???????????????????<ul id="c3" ?style="height: 0px;"> ???????????????????<li>内容1</li> ???????????????????<li>内容2</li> ???????????????????<li>内容3</li> ???????????????????</ul> ???????????????</div> ???????????????????????????</div> ???????????<div class="di21"> ???????????????<div class="c" onmousemove="c(‘c4‘)">标题</div> ???????????????<div class="di22"> ???????????????????<ul id="c4" ?style="height: 0px;"> ???????????????????<li>内容1</li> ???????????????????<li>内容2</li> ???????????????????<li>内容3</li> ???????????????????</ul> ???????????????</div> ???????????????????????????</div> ???????????????????</div> ???????<div id="di3"> ???????????<div class="d31" style="background-color: blue;" onclick="dd(‘e1‘)"> ???????????????国际新闻 ???????????</div> ???????????<div class="d31" style="background-color: #17A2B8;" onclick="dd(‘e2‘)"> ???????????????国内新闻 ???????????</div> ???????????<div class="d31" style="background-color: #721C24;" onclick="dd(‘e3‘)"> ???????????????体育新闻 ???????????</div> ???????????<div class="d31" style="background-color: #C69500;" onclick="dd(‘e4‘)"> ???????????????娱乐新闻 ???????????</div> ???????</div> ???????<div id="e1" style="background-color: blue;" name="ee"> ???????????国际新闻 ???????</div> ???????<div id="e2" style="background-color: #17A2B8;" name="ee"> ???????????国内新闻 ???????</div> ???????<div id="e3" style="background-color: #721C24;" name="ee"> ???????????体育新闻 ???????</div> ???????<div id="e4" style="background-color: #C69500;" name="ee"> ???????????娱乐新闻 ???????</div> ???????????????????????????????<div id="f1"> ???????????<div id="ff"></div> ???????</div> ???????????????<div id="h1"> ???????????<div class="h11">标题 ???????????????<div class="h12">内容</div> ???????????????<div class="h12">内容</div> ???????????????<div class="h12">内容</div> ???????????</div> ???????????<div class="h11">标题 ???????????????<div class="h12">内容</div> ???????????????<div class="h12">内容</div> ???????????????<div class="h12">内容</div> ???????????</div> ???????</div> ???</body></html><script type="text/javascript"> ???/*function a(x){ ???????var sj1 = document.getElementsByTagName("ul"); ???????var sj0 = document.getElementById(x); ?????//x如果加引号变成字符串 ???????if(sj0.style.height == "0px"){ ???????????for(var i = 0;i<sj1.length;i++){ ???????????????sj1[i].style.height = "0px"; ???????????} ???????????sj0.style.transition = "1s"; ???????????sj0.style.height = "120px"; ???????}else{ ???????????sj0.style.height = "0px"; ???????} ???}*/ ???????????function c(z){ ???????var sj2 = document.getElementsByTagName("ul"); ???????var sj3 = document.getElementById(z); ???????if(sj3.style.height == "0px"){ ???????????for(var ii = 0;ii<sj2.length;ii++){ ???????????????sj2[ii].style.height = "0px"; ???????????} ???????????sj3.style.transition = "1s"; ???????????sj3.style.height = "120px"; ???????}else{ ???????????sj3.style.height = "0px"; ???????} ???} ???????????function dd(f){ ???????var sj4 = document.getElementById(f); ???????var sj5 = document.getElementsByName("ee") ???????????for(var i = 0;i<sj5.length;i++){ ???????????????sj5[i].style.display = "none"; ???????????} ???????????sj4.style.transition = "1s"; ???????????sj4.style.display = "block"; ???} ???????????setTimeout("tt()",2000) ???function tt(){ ???????document.querySelector("#ff").style.width = "400px"; ???} ???????????</script>0517JS综合练习、挂事件练习
原文地址：https://www.cnblogs.com/mjwwzy/p/9054075.html