當前位置:編程學習大全網 - 源碼下載 - 怎麽樣通過jQuery實現經典豎向伸縮菜單效果

怎麽樣通過jQuery實現經典豎向伸縮菜單效果

參考下面代碼

<script type="text/javascript" src="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>

  • 上一篇:求通達信軟件:15天內有連續3個以上漲停板,回調後今天出現黃金柱倍量收陽的選股預警公式,謝謝!
  • 下一篇:ffmpeg裏有x264麽
  • copyright 2024編程學習大全網