作为在早些年web前端开发必备框架,jquery近年发展虽然放缓,但是功能依然强大,今年就带来一款jquery下拉菜单_免费下载,代码如下:
如何制作jquery下拉菜单_免费下载
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>如何制作jquery下拉菜单_免费下载</title> </head> <style> * { padding: 0; margin: 0; list-style: none; } .all { width: 330px; height: 30px; margin: 100px auto; background-color: #235EA4; padding-left: 10px; } .all li { width: 100px; height: 30px; background-color: #235EA4; line-height: 30px; text-align: center; float: left; margin-right: 10px; display: inline; position: relative; cursor: pointer; } .all ul { position: absolute; left: 0; top: 30px; display: none; } </style> <body> <!-- 如何制作jquery下拉菜单_免费下载 --> <h1 style="text-align:center;margin-top:50px">如何制作jquery下拉菜单</h1> <ul class="all"> <li>一级菜单 <ul> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> </ul> </li> <li>一级菜单 <ul> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> </ul> </li> <li>一级菜单 <ul> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> </ul> </li> </ul> <!-- 如何制作jquery下拉菜单_免费下载 --> </body> </html> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> <script> $(function () { $('.all>li').hover(function (e) { $(this).children().stop().slideToggle() }); }) </script> |
jquery下拉菜单效果图:
jquery下拉菜单默认状态:

jquery下拉菜单触发状态状态:

看了一下博文,jquery下拉菜单很好理解,感谢博主