页面下拉菜单实现(Jquery 协助实现)

JavaScript:

$(document).ready(function(){ $("#firstpane p.menu_head").click(function() { $(this).next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow"); }); $("#firstpane p.menu_head").mouseover(function() { $(this).css({background:"#2286c6"}); $(this).css({color:"#f96"}); }); $("#firstpane p.menu_head").mouseout(function() { $(this).css({background:"#93cdff"}); $(this).css({color:"#069"}); }); });

CSS:

@charset "utf-8"; .menu_list { width: 118px; } .menu_head { padding: 8px 8px; cursor: pointer; position: relative; margin:1px 0px; font-weight:bold; background: #93cdff; } .menu_body { display:none; } .menu_body a { padding:1px; display:block; color:#006699; background-color:#EFEFEF; font-weight:bold; text-decoration:none; } .menu_body a:hover { color:#7fb2f4; background-color:#dfdfdf; text-decoration:underline; }

HTML:

<div id="firstpane" class="menu_list"> <p class="menu_head"><a href="./index.jsp" mce_href="index.jsp">Home</a></p> <p class="menu_head">One</p> <div class="menu_body"> <a href="#" mce_href="#">子菜单1</a> <a href="#" mce_href="#">子菜单2</a> <a href="#" mce_href="#">子菜单3</a> </div> <p class="menu_head">Two</p> <div class="menu_body"> <a href="#" mce_href="#">子菜单1</a> <a href="#" mce_href="#">子菜单2</a> <a href="#" mce_href="#">子菜单3</a> </div> <p class="menu_head">Three</p> <div class="menu_body"> <a href="#" mce_href="#">子菜单1</a> <a href="#" mce_href="#">子菜单2</a> <a href="#" mce_href="#">子菜单3</a> </div> </div>