一、简单的移动端tab头部二级下拉导航栏，向下弹出，向上隐藏
<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>