三级菜单的js实现（原生）_js三级菜单-CSDN博客

这是一个关于HTML和JavaScript的示例，展示了如何使用flex布局创建一个多级菜单，并通过事件监听来控制菜单项的显示与隐藏。点击周一菜单会显示心情不好和心情不错的子菜单，进一步点击可以触发不同的子菜单项。此代码片段涉及到前端交互设计和DOM操作。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>菜单</title>
		<style >
		.box{
			display: flex;
			background-color: #0094ff;
			height: 43.75rem;
			width: 100%;
		}
		.box_menu{
			height: 6.25rem;
			flex: 1;
		}
		.box_menu_item_1,
		.box_menu_item_2{
			height: 4.375rem;
			display: none;
		}
		
		</style>
	</head>
	<body>
		<div class="box">	
			<div class="box_menu" id="mon">周一
			<div class="box_menu_item_1" id="mon_bad">
				心情不太好
				<a class="box_menu_item_2" id="mon_bad_eat" href="#">想吃东西</a>
				<a class="box_menu_item_2" id="mon_bad_buy" href="#">想买东西</a>
			</div>
			</div>
			<div class="box_menu">周二</div>
			<div class="box_menu">周三</div>
			<div class="box_menu">周四</div>
			<div class="box_menu" id="fri">周五
				<a class="box_menu_item_1" src="#">
					心情不错
					<div class="box_menu_item_2">
						去逛街
					</div>
					<div class="box_menu_item_2"> 去上网</div>
				</a>
			</div>
			<div class="box_menu">周六</div>
			<div class="box_menu" id="sun">周日
			<div id="good_7" class="box_menu_item_1">
				心情好
				<div id="" class="box_menu_item_2">
					吃饭
				</div>
				<div id="" class="box_menu_item_2">
					唱歌
				</div>
			</div> 
			<div id="bad_7" class="box_menu_item_1">
				心情不好
				<div class="box_menu_item_2">吃饭</div>
				<div class="box_menu_item_2">上网</div>
			</div>
			</div>
			
		</div>
	</body>
	<script>
	let  mon = document.querySelector("#mon");
	let  fri = document.querySelector("#fri");
	let	 sun = document.querySelector("#sun");
	let  mon_bad = document.querySelector('#mon_bad');
	let  mon_bad_buy=document.querySelector("#mon_bad_buy");
	let  mon_bad_eat=document.querySelector("#mon_bad_eat");
	let flag_mon = true;	
	let flag_mon_bad = true;
		
		
	console.log(mon_bad_buy);
	
	
	mon.addEventListener("click",function(){
		if(flag_mon==true){
		mon_bad.style.display = "list-item";
		flag_mon = !flag_mon;
		
	}
	else{
		mon_bad.style.display = 'none';
		flag_mon = !flag_mon;
		event.stopPropagation();
	}})
	
	mon_bad.addEventListener("click",function(){
		if(flag_mon==false && flag_mon_bad==true){
			mon_bad_buy.style.display="list-item";
			mon_bad_eat.style.display="list-item";
			flag_mon_bad=!flag_mon_bad;
			}else{
				mon_bad_buy.style.display="none";
				mon_bad_eat.style.display="none";
				flag_mon_bad=!flag_mon_bad;
				console.log(flag_mon_bad)
			}
		},true)

	</script>
</html>