div+css+js實(shí)現(xiàn)菜單的收縮與展開_菜單導(dǎo)航特效

DIV+CSS+JavaScript二者結(jié)合實(shí)現(xiàn)一個(gè)獨(dú)特的展開/收縮菜單，實(shí)際上是用JS控制某一元素的顯示與隱躲，這種效果比較不錯(cuò)，可以用到解釋說明某些產(chǎn)品的技術(shù)參數(shù)等部分。

<!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實(shí)現(xiàn)菜單的收縮與展開</title>
<meta http-equiv="Content-Type" mrc="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];//取得標(biāo)題
     dt.id = "faq_dt_"+(Math.random()*100);
     dt.onclick=function(){
       var p=this.parentNode;//取得父節(jié)點(diǎn)
        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");//取得對(duì)應(yīng)子節(jié)點(diǎn)，也就是說明部分
        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>關(guān)于模板無憂網(wǎng)站</dt>
      <dd>模板無憂（hl5o.cn）提供各類編程源碼、視頻教程、JavaScript/CSS殊效代碼以及常用軟件下載等，做有質(zhì)量的學(xué)習(xí)型源碼下載站。</dd>
    </dl>
  </li>
   <li>
    <dl>
      <dt>模板無憂是一個(gè)學(xué)習(xí)型源碼下載站</dt>
      <dd>模板無憂立志做一個(gè)最好的學(xué)習(xí)型源碼下載站，歡迎您的經(jīng)常光臨，也歡迎提出寶貴建議！</dd>
    </dl>
  </li>
 <li>
    <dl>
      <dt>AjAX是什么？</dt>
      <dd>一種能夠提升用戶體驗(yàn)的WEB2.0新型技術(shù)，可以實(shí)現(xiàn)像電腦系同一樣的操縱體驗(yàn)，類似本地化的一種腳本技術(shù)。</dd>
    </dl>
  </li>
 </ul>
</body>
</html>

所屬頻道：菜單導(dǎo)航特效/更新時(shí)間：2010-05-22

[收藏][報(bào)錯(cuò)][返回列表]

相關(guān)菜單導(dǎo)航特效：

菜單導(dǎo)航特效Rss訂閱特效代碼搜索

菜單導(dǎo)航特效推薦

猜你也喜歡看這些

相關(guān)鏈接：
復(fù)制本頁鏈接| 搜索div+css+js實(shí)現(xiàn)菜單的收縮與展開
特效說明：
菜單導(dǎo)航模板-div+css+js實(shí)現(xiàn)菜單的收縮與展開。

日韩天天综合网_野战两个奶头被亲到高潮_亚洲日韩欧美精品综合_av女人天堂污污污_视频一区**字幕无弹窗_国产亚洲欧美小视频_国内性爱精品在线免费视频_国产一级电影在线播放_日韩欧美内地福利_亚洲一二三不卡片区

div+css+js實(shí)現(xiàn)菜單的收縮與展開_菜單導(dǎo)航特效

菜單導(dǎo)航特效Rss訂閱特效代碼搜索

菜單導(dǎo)航特效推薦

猜你也喜歡看這些