<!DOCTYPE html> <html> <head> <title>jQuery水平下拉菜单实现</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" charset="UTF-8" > <meta content="width=device-width, initial-scale=1.0"> <script src="https://www.jb51.net/bootstrap/js/jquery-1.11.1.min.js"></script> <!--[if lt IE 9]> <script src="https://www.jb51.net/bootstrap/js/html5shiv.js"></script> <script src="https://www.jb51.net/bootstrap/js/respond.min.js"></script> <![endif]--> <style type="text/css"> .menus{border:1px solid red; float:left; margin-left:4px; background:red;} .menus a{display:block; width:100px; text-align:center;} .menu{display:none;} a{cursor:pointer;text-decoration:none;} a:hover{background:white; text-decoration:none;} a:visited{text-decoration:none; color:black;} </style> <script> $(function(){ $(".menu-title").click(function(){ $(this).next().toggleClass(); }); }); </script> </head> <body> <div> <a>菜单项</a> <div> <a href="#">菜单列表</a> <a href="#">菜单列表</a> <a href="#">菜单列表</a> <a href="#">菜单列表</a> </div> </div> <div> <a>菜单项</a> <div> <a href="#">菜单列表</a> <a href="#">菜单列表</a> <a href="#">菜单列表</a> <a href="#">菜单列表</a> </div> </div> <div> <a>菜单项</a> <div> <a href="#">菜单列表</a> <a href="#">菜单列表</a> <a href="#">菜单列表</a> <a href="#">菜单列表</a> </div> </div> <div> <a>菜单项</a> <div> <a href="#">菜单列表</a> <a href="#">菜单列表</a> <a href="#">菜单列表</a> <a href="#">菜单列表</a> </div> </div> </body> </html>
您可能感兴趣的文章: