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整理

學習交流

如何查找有故障的配件

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

熱門圖片

猜你喜歡的新聞

猜你喜歡的關注