jQuery滑動導覽功能表

標籤：des   style   blog   http   io   os   java   ar   div   

js：

$(function(){$("ul.sub").parent().append("<span></span>");$("ul.sub ul").parent().append("<em></em>");$(‘#nav ul‘).closest(‘li‘).hover(function(){$(this).find("span").addClass("arrow");$(this).find("em").removeClass("arrow");$(this).children("ul").stop(true,true).slideDown(‘fast‘).show();$("#nav ul>li").hover(function(){$(this).addClass("hover")},function(){$(this).removeClass("hover")});},function(){$(this).children("ul").stop(true,true).hide();$(this).find("span").removeClass("arrow");$(this).find("em").addClass("arrow");})})

　　

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><meta name="author" content="Web Layout:LiQiang.Gu;" /><meta name="description" content="前端思考 web前端 前端製作 artskin www.artcss.com" /><meta name="Keywords" content="前端思考 web前端 前端製作 artskin www.artcss.com" /><title>下拉導覽功能表</title><script type="text/javascript" src="http://www.artcss.com/js/jq_1.4.js"></script><link rel="stylesheet" rev="stylesheet" href="http://www.artcss.com/test/menu/menu.css" type="text/css" /><script type="text/javascript">$(function(){$("ul.sub").parent().append("<span></span>");$("ul.sub ul").parent().append("<em></em>");$(‘#nav ul‘).closest(‘li‘).hover(function(){$(this).find("span").addClass("arrow");$(this).find("em").removeClass("arrow");$(this).children("ul").stop(true,true).slideDown(‘fast‘).show();$("#nav ul>li").hover(function(){$(this).addClass("hover")},function(){$(this).removeClass("hover")});},function(){$(this).children("ul").stop(true,true).hide();$(this).find("span").removeClass("arrow");$(this).find("em").addClass("arrow");})});</script></head><body><div class="nav"><ul id="nav"><li class="first">遊戲介紹<ul class="sub"><li><a href="#">子功能表二</a></li><li><a href="#">子功能表二</a></li><li><a href="#">子功能表二</a></li><li><a href="#">子功能表二</a></li></ul></li><li class="first">新手引導<ul class="sub"><li><a href="#">子功能表二</a><ul><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="#">子功能表二</a><ul><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="#">子功能表二</a></li><li><a href="#">子功能表二</a></li></ul></li><li class="first">進階資料<ul class="sub"><li><a href="#">子功能表二</a></li><li><a href="#">子功能表二</a><ul><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="#">子功能表二</a></li><li><a href="#">子功能表二</a></li></ul></li><li class="first">職業技能<ul class="sub"><li><a href="#">子功能表二</a></li><li><a href="#">子功能表二</a><ul><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="#">子功能表二</a></li><li><a href="#">子功能表二</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></li><li class="first">裝備道具<ul class="sub"><li><a href="#">子功能表二</a></li><li><a href="#">子功能表二</a><ul><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="#">子功能表二</a><ul><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="#">子功能表二</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></li><li class="first">任務指引<ul class="sub"><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>

　　

jQuery滑動導覽功能表