6.练习：下拉菜单
Posted alex-xxc
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了6.练习：下拉菜单相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; } .menu{ width: 150px; margin: 0 auto; } ul{ list-style: none; } a{ display: block; padding-left: 30px; text-decoration: none; height: 34px; line-height: 34px; font-size: 12px; } .menu>ul>li{ margin-bottom: 1px; } .menu>ul>li>a{ background: url("menu_folder.jpg") no-repeat; color: #fff; height: 26px; line-height: 26px; } ul ul a{ color: #0E6FBC; background: url("ico_13.gif") no-repeat no-repeat 15px 14px; } ul ul{ display: none; } ul ul li{ border: 1px solid #ADCCEA; border-top: 0; } </style> <script src="../jquery/jquery-3.3.1.js"></script> <script> $(document).ready(function () { $(".menu>ul>li").click(function () { $(this).children("ul").slideToggle(); }); }); </script> </head> <body> <div class="menu"> <ul> <li> <a href="#" class="ll">我的教学</a> <ul> <li><a href="#">学籍信息</a></li> <li><a href="#">培养计划</a></li> <li><a href="#">成绩查询</a></li> <li><a href="#">选课</a></li> <li><a href="#">已选课程查询</a></li> <li><a href="#">我的课表</a></li> <li><a href="#">考试查询</a></li> <li><a href="#">免修申请</a></li> <li><a href="#">缓考申请</a></li> <li><a href="#">清考报名</a></li> <li><a href="#">我的预警</a></li> <li><a href="#">学费缴费信息查询</a></li> <li><a href="#">校外成绩(四六级)</a></li> <li><a href="#">转专业申请</a></li> <li><a href="#">教材订购</a></li> <li><a href="#">离校人员信息</a></li> <li><a href="#">双学位报名</a></li> <li><a href="#">毕业论文</a></li> </ul> </li> <li> <a href="#" class="ll">量化评教</a> <ul> <li><a href="#">学生评教课程</a></li> </ul> </li> <li> <a href="#" class="ll">公共服务</a> <ul> <li><a href="#">教室借用</a></li> <li><a href="#">全校开课查询</a></li> <li><a href="#">站内消息</a></li> <li><a href="#">第三方授权管理</a></li> </ul> </li> </ul> </div> </body> </html>
图片1
图片2
图片3
以上是关于6.练习：下拉菜单的主要内容，如果未能解决你的问题，请参考以下文章