jQuery1.3.2豎向的伸縮菜單

2024-09-05 12:20:32

字體：大中小

供稿：網(wǎng)友

使用jquery1.3.2制作的豎向伸縮菜單，每點(diǎn)擊一次主菜單，會(huì)拉開(kāi)出對(duì)應(yīng)的二級(jí)菜單，再次點(diǎn)擊會(huì)合攏，歡迎下載使用。

<!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源碼類(lèi)</li>                <li>PHP源碼類(lèi)</li>                <li>ASP.net源碼類(lèi)</li>             </ul>           </dd>                   </dl>        </dd>        <dd>        <dl>           <dt>網(wǎng)頁(yè)特效</dt>           <dd>              <ul>                <li>菜單導(dǎo)航</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>如果初次運(yùn)行，請(qǐng)刷新一次頁(yè)面，調(diào)用了本站的jQuery，可能加載需要些時(shí)間。</p></body></html>

上一篇：純CSS實(shí)戰(zhàn)豎向?qū)Ш讲藛?/a>

下一篇：純CSS下拉菜單，Aspku.com整理