JS的无序列表显示与隐藏

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS显示与隐藏</title>
</head>
<body>
<script type="text/javascript">
var hidden=true;
function displayOrHidden() {
var cityOfChina=document.getElementById("cityOfChina");
if(hidden){
cityOfChina.style.display="block";
hidden=false;
}else {
cityOfChina.style.display="none";
hidden=true;
}
}
</script>
<div id="myDiv">
<ul>
<li><a onclick="displayOrHidden()">中国</a>
<ul id="cityOfChina">
<li>北京</li>
<li>上海</li>
<li>天津</li>
</ul>
</li>
<li>美国</li>
<li>日本</li>
</ul>
</div>
</body>
</html>


相关文章