Js- 菜单
很简单的JS二级菜单显示，收藏
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> .menu span { float: left; margin-right: 10px; position: relative;} .menu a { display: block; } .menu span div { border: 1px solid black;display: none; } </style> <script src="Js/jquery-1.8.0.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function () { $(".menu span").hover(function () { $(this).children("div").attr("style", "display: block"); }, function () { $(this).children("div").attr("style", ""); }) }); </script> </head> <body> <div class="menu"> <span><a href="#">菜单一</a></span> <span><a href="#">菜单二</a> <div> <a href="#">子项一</a> <a href="#">子项二</a> <a href="#">子项三</a> </div> </span> <span><a href="#">菜单三</a> <div> <a href="#">子项一</a> <a href="#">子项二</a> <a href="#">子项三</a> </div> </span> </div> </body> </html>
竖直的，点击
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } #nav { width: 200px; margin: 50px; } #nav h3 { cursor: pointer; line-height: 30px; height: 30px; background-color: #000000; color: #fff; } #nav a { display: block; line-height: 24px; color: #666666; } #nav a:hover { background-color: #eee; color: #000; } #nav div { display: none; border: 1px solid #000; border-top: none; } </style> <script type="text/javascript"> function $(id) { return document.getElementById(id) } window.onload = function (e) { $("nav").onclick = function (e) { var src = e ? e.target : event.srcElement; if (src.tagName == "H3") { var next = src.nextElementSibling || src.nextSibling; next.style.display = (next.style.display == "block") ? "none" : "block"; } } } </script> </head> <body> <div id="nav"> <h3> 管理区</h3> <div> <a href="#">111</a> <a href="#">222</a> <a href="#">333</a> </div> <h3> 交流区</h3> <div> <a href="#">aaa</a> <a href="#">bbb</a> <a href="#">ccc</a> </div> </div> </body> </html>
