div+css+js實現菜單的收縮與展開

2024-09-05 12:19:18

字體：大中小

來源：轉載

供稿：網友

DIV+CSS+JavaScript二者結合實現一個獨特的展開/收縮菜單，實際上是用JS控制某一元素的顯示與隱藏，這種效果比較不錯，可以用到解釋說明某些產品的技術參數等部分。

<!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><title>div+css+js實現菜單的收縮與展開</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style type="text/css">body { margin: 30px auto;}ul { list-style: none;}#faq { font-size: 12px; width: 800px;}#faq li { margin: 0 0 10px; padding: 0 0 5px;}#faq dl { margin: 0; padding:0; display:inline;}#faq dt { font-weight:bold; cursor:pointer; line-height: 20px; padding: 0 0 5px 22px; border-bottom:1px #ccc dotted;}#faq dd { display:none; margin:0; padding: 5px 0 5px 20px; background:#E5ECF9; line-height: 180%;}</style><script type="text/javascript">var lastFaqClick=null;window.onload=function(){  var faq=document.getElementById("faq");  var dls=faq.getElementsByTagName("dl");  for (var i=0,dl;dl=dls[i];i++){    var dt=dl.getElementsByTagName("dt")[0];//取得標題     dt.id = "faq_dt_"+(Math.random()*100);     dt.onclick=function(){       var p=this.parentNode;//取得父節點        if (lastFaqClick!=null&&lastFaqClick.id!=this.id){          var dds=lastFaqClick.parentNode.getElementsByTagName("dd");          for (var i=0,dd;dd=dds[i];i++)            dd.style.display='none';        }        lastFaqClick=this;        var dds=p.getElementsByTagName("dd");//取得對應子節點，也就是說明部分        var tmpDisplay='none';        if (gs(dds[0],'display')=='none')          tmpDisplay='block';        for (var i=0;i<dds.length;i++)          dds[i].style.display=tmpDisplay;      }  }}function gs(d,a){  if (d.currentStyle){    var curVal=d.currentStyle[a]  }else{    var curVal=document.defaultView.getComputedStyle(d, null)[a]  }  return curVal;}</script></head><body><ul id="faq">  <li>    <dl>      <dt>JQuery InnerFade</dt>      <dd>JQuery InnerFade 是一款專業用來在網頁上顯示淡入淡出效果的插件，可以下載到原版，它可完成圖片與圖片、文字與文字、網頁與廣告的漸顯效果，同時使用方法簡便，官方示例文件已附加進壓縮包，使用本特效，可增加你網頁的生動性，避免死板，讓用戶獲得更好的用戶體驗。。</dd>    </dl>  </li>   <li>    <dl>      <dt>開源相冊圖片直讀版</dt>      <dd>Dynamic Flash Gallery 開源相冊圖片直讀版，運行于PHP環境，使用時只需設定圖片目錄，相冊會自動讀取目錄中的圖片，然后將圖片組織起來，并生成一個帶滑塊瀏覽功能的相冊。</dd>    </dl>  </li> <li>    <dl>      <dt>AjAX是什么？</dt>      <dd>一種能夠提升用戶體驗的WEB2.0新型技術，可以實現像電腦系統一樣的操作體驗，類似本地化的一種腳本技術。</dd>    </dl>  </li> </ul></body></html>

上一篇：鼠標放上彈出仿QQ下拉菜單的代碼

下一篇：韓國風格的CSS菜單導航條