1.编写html及css样式;
2.鼠标悬浮在某项时，展开其下所有子项，同时收起其余项目。
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>restaurant</title>
<link href="./食堂css.css" rel="stylesheet" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
</head>
<body>
<div id="container">
<h1>二元食堂</h1>
<ul>
<li class="cparent">美食
<ul class="cover">
<li>蛋糕</li>
<li>奶茶</li>
<li>板栗</li>
<li>寿司</li>
<li>火锅</li>
<li>冰棒</li>
<li>汉堡</li>
<li>牛排</li>
</ul>
</li>
<li class="cparent">生鲜
<ul class="cover">
<li>鱼片</li>
<li>墨鱼</li>
<li>鸡肉</li>
<li>牛丸</li>
<li>虾滑</li>
<li>桔子</li>
<li>西瓜</li>
<li>菠萝</li>
</ul>
</li>
<li class="cparent">零食
<ul class="cover">
<li>薯片</li>
<li>瓜子</li>
<li>辣条</li>
<li>虾条</li>
<li>鸭脖</li>
<li>可乐</li>
<li>雪碧</li>
<li>椰汁</li>
</ul>
</li>
</ul>
</div>
<script>
$(function(){
$(".cparent").on("mouseover",function(){
$(this).children().show()
<！--这里需要先返回其父元素，再获取父元素的兄弟元素并折叠--> .parent().siblings().children().hide();
});
});
</script>
</body>
</html>
body{
margin: 0;
background: url(https://static1.bcjiaoyu.com/c2452c0fd9a6e8dfbe15f78a619afc20_x.jpg-4000x3000);
background-size: cover;
}
#container{
position: absolute;
top: 0;
left: 0;
width: 300px;
background-color: rgb(199, 204, 209);
}
h1{
text-align: center;
}
.cover{
display: none;
}
网友评论