js實現選單的收起和展開
阿新 • • 發佈：2019-01-27
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>選單的收起和展開</title>
<style type="text/css">
ul{
list-style-type: none;
}
#cityList1{
display: none;
}
#cityList2{
display: none;
}
#cityList3{
display: none;
}
#cityList4{
display: none;
}
</style>
<script type="text/javascript">
//預設隱藏的
var hide=true;
//顯示或者隱藏的函式
function displayOrHide1(){
var cityList=document.getElementById("cityList1");
if(hide){
//顯示
cityList.style.display="block";
hide=false;
}else{
//隱藏
cityList.style.display="none";
hide=true;
}
}
function displayOrHide2(){
var cityList=document.getElementById("cityList2");
if(hide){
//顯示
cityList.style.display="block";
hide=false;
}else{
//隱藏
cityList.style.display="none";
hide=true;
}
}
function displayOrHide3(){
var cityList=document.getElementById("cityList3");
if(hide){
//顯示
cityList.style.display="block";
hide=false;
}else{
//隱藏
cityList.style.display="none";
hide=true;
}
}
function displayOrHide4(){
var cityList=document.getElementById("cityList4");
if(hide){
//顯示
cityList.style.display="block";
hide=false;
}else{
//隱藏
cityList.style.display="none";
hide=true;
}
}
</script>
</head>
<body>
<ul>
<li><a style="color:blue;cursor:pointer;" onclick="displayOrHide1();">北京市</a>
<ul id="cityList1">
<li>東城區</li>
<li>西城區</li>
<li>朝陽區</li>
<li>海淀區</li>
<li>豐臺區</li>
</ul>
</li>
<li><a style="color:blue;cursor:pointer;" onclick="displayOrHide2();">廣東省</a>
<ul id="cityList2">
<li>深圳市</li>
<li>廣州市</li>
<li>珠海市</li>
<li>汕頭市</li>
<li>佛山市</li>
</ul>
</li>
<li><a style="color:blue;cursor:pointer;" onclick="displayOrHide3();">浙江省</a>
<ul id="cityList3">
<li>杭州市</li>
<li>寧波市</li>
<li>溫州市</li>
<li>嘉興市</li>
<li>嘉興市</li>
</ul>
</li>
<li><a style="color:blue;cursor:pointer;" onclick="displayOrHide4();">陝西省</a>
<ul id="cityList4">
<li>雁塔區</li>
<li>碑林區</li>
<li>臨潼區</li>
<li>新城區</li>
<li>長安區</li>
</ul>
</li>
</ul>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>選單的收起和展開</title>
<style type="text/css">
ul{
list-style-type: none;
}
#cityList1{
display: none;
}
#cityList2{
display: none;
}
#cityList3{
display: none;
}
#cityList4{
display: none;
}
</style>
<script type="text/javascript">
//預設隱藏的
var hide=true;
//顯示或者隱藏的函式
function displayOrHide1(){
var cityList=document.getElementById("cityList1");
if(hide){
//顯示
cityList.style.display="block";
hide=false;
}else{
//隱藏
cityList.style.display="none";
hide=true;
}
}
function displayOrHide2(){
var cityList=document.getElementById("cityList2");
if(hide){
//顯示
cityList.style.display="block";
hide=false;
}else{
//隱藏
cityList.style.display="none";
hide=true;
}
}
function displayOrHide3(){
var cityList=document.getElementById("cityList3");
if(hide){
//顯示
cityList.style.display="block";
hide=false;
}else{
//隱藏
cityList.style.display="none";
hide=true;
}
}
function displayOrHide4(){
var cityList=document.getElementById("cityList4");
if(hide){
//顯示
cityList.style.display="block";
hide=false;
}else{
//隱藏
cityList.style.display="none";
hide=true;
}
}
</script>
</head>
<body>
<ul>
<li><a style="color:blue;cursor:pointer;" onclick="displayOrHide1();">北京市</a>
<ul id="cityList1">
<li>東城區</li>
<li>西城區</li>
<li>朝陽區</li>
<li>海淀區</li>
<li>豐臺區</li>
</ul>
</li>
<li><a style="color:blue;cursor:pointer;" onclick="displayOrHide2();">廣東省</a>
<ul id="cityList2">
<li>深圳市</li>
<li>廣州市</li>
<li>珠海市</li>
<li>汕頭市</li>
<li>佛山市</li>
</ul>
</li>
<li><a style="color:blue;cursor:pointer;" onclick="displayOrHide3();">浙江省</a>
<ul id="cityList3">
<li>杭州市</li>
<li>寧波市</li>
<li>溫州市</li>
<li>嘉興市</li>
<li>嘉興市</li>
</ul>
</li>
<li><a style="color:blue;cursor:pointer;" onclick="displayOrHide4();">陝西省</a>
<ul id="cityList4">
<li>雁塔區</li>
<li>碑林區</li>
<li>臨潼區</li>
<li>新城區</li>
<li>長安區</li>
</ul>
</li>
</ul>
</body>
</html>