jQuery展开、收缩的树状目录菜单或导航代码

发布时间：2018-08-21 10:05:25 所属栏目：政策来源：站长网

导读：jQuery 展开，合拢的Js树状目录菜单或导航，从一个购物网发现的菜单，觉得挺不错的形式，当然在仿写后，与原菜单有些出入，原菜单中是地市导航，要能更适合这种形式，而本菜单是一个网站的栏目导航，从外观上来说，有些差异，不过代码是一样的，只是换换内

　　jQuery展开，合拢的Js树状目录菜单或导航，从一个购物网发现的菜单，觉得挺不错的形式，当然在仿写后，与原菜单有些出入，原菜单中是地市导航，要能更适合这种形式，而本菜单是一个网站的栏目导航，从外观上来说，有些差异，不过代码是一样的，只是换换内容。

　　为解决一些网页特效运行后不能显示效果（例如：jQuery则需要刷新）问题，烈火特别新增网页版演示。

　　点击查看：网页特效

　　运行演示：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>树状展开，合拢的菜单</title> <meta http-equiv="Content-Type" content="text/html; charset=gbk" /> <style type="text/css"> span{display:block;float:left;width:12px;height:12px;margin:4px;cursor: pointer;background-image:url(/uploads/allimg/1104/iw_minus.gif);} </style> <script type="text/javascript" src="/uploads/common/js/jquery-1.4.2.min.js"></script> <script type="text/javascript"> $(function(){ $("#o").click(function(){ $("#c").slideToggle("slow"); cbg($("#o")); }) }) function cbg(sp) { if (sp) { if (sp.css("background-image").indexOf("iw_plus.gif")>=0) { sp.css("background-image","url(/uploads/allimg/1104/iw_minus.gif)"); } else { sp.css("background-image","url(/uploads/allimg/1104/iw_minus.gif)"); } } } </script> </head> <body> <div style="width:800px;margin:20px auto;border:1px #CCCCCC solid;"> <div style="background-color:#F0F0F0;padding: 3px;"> <span id="o"></span> <strong>烈火学院：资源导航</strong> </div> <div style="padding: 10px;"id="c"> <a href="#">ASP</a> <a href="#">PHP</a> <a href="#">C#</a> <a href="#"><b>Java</b></a> <a href="#">VC/C++</a><br> <a href="#">VB</a> <a href="#">Delphi</a> <a href="#">Ajax</a> <a href="#">脚本资源</a> <a href="#">jQuery</a> <a href="#">Flash</a> <a href="#">电子书</a> <a href="#">素材</a> </div> </div> </body> </html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：济源站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!