教程集 > 脚本编程 > javascript > 正文滑动菜单

滑动菜单

发布时间：2016-11-26 编辑：jiaochengji.com

教程集为您提供滑动菜单等资源，欢迎您收藏本站，我们将为您提供最新的滑动菜单资源

提示：您可以先修改部分代码再运行

<textarea name="runcool" rows="28" cols="75" > <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> 滑动门菜单 css滑动菜单 js 滑动菜单</title> <script src="http://code.jquery.com/jquery-latest.pack.js" type="text/javascript"></script> <style type="text/css"> </style> </head> <body>

此处显示 class "box_sub" 的内容

此处显示 class "box_sub" 的内容

此处显示 class "box_sub" 的内容

此处显示 class "box_sub" 的内容

此处显示 class "box_sub" 的内容

此处显示 class "box_sub" 的内容

此处显示 class "box_sub" 的内容

</body> <script type="text/javascript"> function showandhide() { var divs =$("#layoutbox>div"); divs.each( function(i) { divo = $(this); divo.find("div").toggle(500); //给span添加事件 divo.eq(0).find("span").eq(0).click( function() { divs.find("div").each( function() { $(this).hide(700, function() { $( this).parent("div").find("span").get(0).innerHTML ="显示菜单";//show text cange } ); }); var actdiv = $(this).parent().find("div"); actdiv.toggle(700,function(){// 当完成后执行函数处理 if(actdiv.get(0).style.display=="none") { $( this).parent("div").find("span").get(0).innerHTML ="显示菜单"; } else { $( this).parent("div").find("span").get(0).innerHTML ="隐藏菜单"; } }); } ); } ); } //如果在本地或自己服务器上可以不用下面的window.onload直接用 showandhide(); 启动菜单 window.onload=function() { showandhide(); } </script> </html></textarea>

提示：您可以先修改部分代码再运行

您可能感兴趣的文章：
jQuery水平下拉菜单 jMenu
js向滑动导航菜单源码
 jQuery卷帘菜单插件 HoverAccordion
滑动菜单
 40个有创意的jQuery图片和内容滑动及弹出插件收藏集之三
 7款风格新颖的jQuery/CSS3菜单导航分享
 jquery弹性滑动导航菜单
 利用JQuery动画制作滑动菜单项效果实现步骤及代码
 jQuery菜单插件 Smooth Navigational Menu
jQuery 菜单随滚条改为以定位方式(固定要浏览器顶部)

上一篇：简单滑动菜单代码下一篇：js tab选项卡效果代码

[关闭]

滑动菜单

最近更新

浏览排行