版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/weixin_39644462/article/details/81053318
没事写个简单的demo,做一下学习记录,也欢迎大家一起交流讨论。不多说,上代码
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name='viewport' content='width=device-width,minimum-scale=1.0 maximum-scale=1.0 user-scalable=no' />
<title>YanGo</title>
<script type="text/javascript" src="http://www.xxiaoyuan.top/jquery-1.9.1.js"></script>
<style>
*{
padding: 0;
margin: 0 auto;
}
li{
list-style-type: none;
}
.box{
margin: auto;
}
.bar{
position: relative;
float: left;
width: 33.33%;
text-align: center;
}
.bar p{
background-color: #08c;
color: #fff;
height: 40px;
line-height: 40px;
}
.bar ul{
display: none;
margin-top: 10px;
position: relative;
top: 0;
background: #29a7e6;
color: #fff;
width: 80%;
position: relative;
border-radius: 10px;
}
.bar ul:before{
position: absolute;
content: "";
top: -8px;
background: #29a7e6;
width: 15px;
height: 15px;
left: 46%;
transform:rotate(45deg);
z-index: -1;
}
.bar ul li{
height: 35px;
line-height: 35px;
}
.box li:active{
background: rgba(255,255,255,.3);
}
</style>
</head>
<body>
<div class="box">
<ul class="ul1">
<li class="bar">
<p>早餐</p>
<ul>
<li>糕点</li>
<li>稀粥</li>
<li>营养</li>
</ul>
</li>
<li class="bar">
<p>午餐</p>
<ul>
<li>小炒</li>
<li>凉拌</li>
<li>甜点</li>
</ul>
</li>
<li class="bar">
<p>晚餐</p>
<ul>
<li>汤类</li>
<li>肉类</li>
<li>清淡</li>
</ul>
</li>
<div style="clear: both;"></div>
</ul>
</div>
</body>
<script>
$(".bar").click(function(){
if($(this).children("ul").css("display") == "block"){
$(this).children("ul").slideUp(300);
}
else{
$(this).children("ul").slideDown(300);
}
});
</script>
</html>
这里也提供一下demo给大家手机浏览,扫描一下下面的二维码即可
传送门在这里:点击打开demo