版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
1、点击显示隐藏列表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
li{
list-style: none;
}
.list>li{
margin-right: 50px;
float: left;
}
.list>li>ul{
display: none;
}
</style>
</head>
<body>
<ul class="list">
<li>我是大可爱
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</li>
<li>我是大可爱
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</li>
<li>我是大可爱
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</li>
<li>我是大可爱
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</li>
</ul>
<script type="text/javascript">
//获取父级标签
var list=document.querySelectorAll('.list>li');
for(var i=0;i<list.length;i++){
//循环给li标签加点击事件
list[i].onclick=function(){
var uls=this.querySelector('ul');
//只能点击收回一次
// uls.style.display=uls.style.display==(''||'none')?'block':'none';
//注意条件要==否则出问题
if(uls.style.display==''){
uls.style.display='block';
}else if(uls.style.display=='none'){
uls.style.display='block';
}else{
uls.style.display='none';
}
}
}
</script>
</body>
</html>
2、点击设置display
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.mylist>li{
float: left;
list-style: none;
margin-right:10px;
}
.mylist>li>ul>li{
list-style: none;
}
</style>
</head>
<body>
<ul class="mylist">
<li>首页</li>
<li>公司介绍</li>
<li>产品展示</li>
<li id="list">联系我们
<ul id="sList" style="display: none;">
<li>手机</li>
<li>电脑</li>
</ul>
</li>
</ul>
<script type="text/javascript">
var list=document.getElementById('list');
var sList=document.getElementById('sList');
list.onclick=function(){
sList.style.display='block';
}
</script>
</body>
</html>