今天为大家分享了一个小案例，二级伸缩菜单（原生JS）原理制作的吃货菜谱，顺便给大家安利一波好吃的菜。这个案例还是挺适合刚刚入门js的新手的，平常找不到案例练习的萌新们，可以拿去练练手，老江湖们看了尽管指出小编我的毛病，小编愿意去听取你们的意见~
效果图：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="智能机器人" content="智能机器人">
<title>智能机器人</title>
<style>
*{margin:0;padding:0;font-family: Microsoft YaHei,serif;}
li{list-style: none;}
#box{
overflow: hidden;
position: fixed;
height: 100%;
width: 200px;
border: 1px solid #fff;
border-radius: 5px;
background-color: #273147;
}
#box .title{
width: 100%;
height: 66px;
line-height: 66px;
background-color: #4ab35e;
text-align: center;
color: #fff;
font-size: 25px;
font-weight: 500;
}
#box p{
width: 100%;
height: 55px;
line-height: 55px;
border-bottom: 1px solid #11151d;
background-color: #273147;
text-indent:40px;
color: #fff;
cursor: pointer;
}
#box ul{
overflow: hidden;
height: 0;
}
#box ul.active{
height:auto;
}
#box ul li{
background-color: #eee;
height: 30px;
line-height: 30px;
border-bottom:1px solid #11151d;
background-color: #11151d;
font-size: 12px;
text-indent: 40px;
color: #fff;
}
#box ul li:hover{
background-color: #4ab35e;
transition: all 0.4s ease;
cursor: pointer;
}
</style>
</head>
<body>
<div id="box">
<div class="title">吃货菜谱</div>
<p>川 菜</p>
<ul>
<li>夫妻肺片</li>
<li>鱼香肉丝</li>
<li>石磨豆花</li>
<li>酸菜鱼</li>
<li>重庆火锅开水白菜</li>
<li>东坡肘子</li>
</ul>
<p>粤 菜</p>
<ul>
<li>漫盐焗鸡汐</li>
<li>麒麟鲈鱼</li>
<li>客家酿豆腐</li>
<li>豉汁蒸排骨</li>
<li>广州文昌鸡</li>
<li>阿一鲍鱼</li>
<li>清蒸东星斑</li>
</ul>
<p>湘 菜</p>
<ul>
<li>面包全鸭</li>
<li>东安子鸡</li>
<li>五元神仙鸡</li>
<li>板栗烧菜心</li>
<li>组庵鱼翅</li>
<li>红煨鱼翅</li>
<li>吉首酸肉</li>
<li>油炸肉丸</li>
</ul>
</div>
<script>
let box = document.getElementById("box"),
Ps = box.getElementsByTagName("p"),
Uls = box.getElementsByTagName("ul"),
Lis = box.getElementsByTagName("li"),
index = null;
length = Ps.length;
for(let i=0;i<length;i++){
Ps[i].index = i;
Ps[i].onclick = function () {
if(index!==null){
Uls[index].className = "";
}
index = this.index;
Uls[index].className = "active";
}
}
</script>
</body>
</html>这段代码还有一定需要完善的地方，如果发现，请在评论区下方给我留言哦~感谢各位的支持！