js案例——下拉列表

最新推荐文章于 2024-06-24 03:50:15 发布

资本理念

最新推荐文章于 2024-06-24 03:50:15 发布

阅读量385

点赞数

分类专栏： web前端笔记总结

本文链接：https://blog.csdn.net/qq_43151638/article/details/102631094

版权

web前端笔记总结专栏收录该内容

78 篇文章 1 订阅

订阅专栏

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>

资本理念

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
js案例——下拉列表

点击显示隐藏列表<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title> <style type="text/css"> li{ list-style: none; } .list>li{ marg...
复制链接

扫一扫