jQuery1.3.2竖向的伸缩菜单

2024-09-05 12:20:32

字体：大中小

来源：转载

供稿：网友

使用jquery1.3.2制作的竖向伸缩菜单，每点击一次主菜单，会拉开出对应的二级菜单，再次点击会合拢，欢迎下载使用。

<!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><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>jquery1.3.2竖向的伸缩菜单</title><script type="text/javascript" src="/ajaxjs/jquery1.3.2.js"></script><script type="text/javascript">	  $(document).ready(function(){	       $("#wenzhang>dd>dl>dd").hide();	     $.each($("#wenzhang>dd>dl>dt"), function(){			$(this).click(function(){				$("#wenzhang>dd>dl>dd ").not($(this).next()).slideUp();				$(this).next().slideToggle(500);				//$(this).next().toggle();			});			});	  });    </script><style type="text/css">dl,dd,dt,ul,li{ margin:0; padding:0; list-style:none; color:#333;}#wenzhang{ width:300px; text-align:center; font-size:12px;border-left:1px solid #dedede;border-right:1px solid #dedede; border-bottom:1px solid #dedede;}#wenzhang  dd dl dt{ border-top:1px solid #dedede; background:#f2f2f2; height:25px; line-height:25px; font-weight:bold;}#wenzhang ul{ background:#f9f9f9; }#wenzhang li{ border-top:1px solid #efefef; line-height:25px;}</style></head><body>    <dl id="wenzhang">        <dd>        <dl>           <dt>源码下载</dt>           <dd>             <ul>                <li>ASP源码类</li>                <li>PHP源码类</li>                <li>ASP.net源码类</li>             </ul>           </dd>                   </dl>        </dd>        <dd>        <dl>           <dt>网页特效</dt>           <dd>              <ul>                <li>菜单导航</li>                <li>层和布局洋</li>                <li>表单及按钮</li>              </ul>           </dd>        </dl>        </dd>         <dd>        <dl>           <dt>最新更新</dt>           <dd>              <ul>                 <li>最新更新</li>                 <li>下载排行</li>                 <li>推荐下载</li>              </ul>           </dd>        </dl>        </dd>     </dl>    <p>如果初次运行，请刷新一次页面，调用了本站的jQuery，可能加载需要些时间。</p></body></html>

上一篇：纯CSS实战竖向导航菜单

下一篇：纯CSS下拉菜单，Aspku.com整理

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注