JavaScript二級下拉選單詳解

admin發表於2018-08-11
JavaScript

下面通過程式碼例項介紹一下，如何利用原生JavaScript實現二級下拉選單效果。

程式碼例項如下: 

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
#nav{
  list-style:none;
  text-align:center;
}
#nav li{
  float:left;
  width:100px;
  color:white;
  background-color:#3E3E3E;
}
#menu{
  list-style:none;
  padding:5px;
  display:none;
  margin-left:-5px;
  margin-top:-5px;
}
#menu li{
  background-color:#ccc;
  width:100px;
  text-align:left;
  padding-left:10px;
}
#menu li a:link{
  text-decoration:none;
  display:block;
}
#menu li a:hover{
  background-color:#3E3E3E;
  color:white
}
</style>
<script type="text/javascript"> 
window.onload=function(){
  var lis=document.getElementById("nav").getElementsByTagName('li'); 
  var i=0;
  for( i=0;i<lis.length;i++){ 
    if (lis[i].className == "child") {
      lis[i].onmouseover=function(){ 
        var ulObj=this.getElementsByTagName('ul')[0]; 
        ulObj.style.display="block"; 
        this.style.backgroundColor="#ccc"; 
        this.style.color="black"; 
      } 
    }
    lis[i].onmouseout=function(){ 
      var ulObj=this.getElementsByTagName('ul')[0];
      ulObj.style.display="none"; 
      this.style.backgroundColor="#3E3E3E"; 
      this.style.color="white"; 
    } 
  } 
}
</script>
</head>
<body>
<ul id="nav">
  <li class="child">
    螞蟻部落一
    <ul id="menu">
      <li><a href="#">div css教程</a></li>
      <li><a href="#">js教程</a></li>
      <li><a href="#">運營交流</a></li>
      <li><a href="#">站長工具</a></li>
    </ul>
  </li>
  <li class="child">
    螞蟻部落二
    <ul id="menu">
      <li><a href="#">jquery教程</a></li>
      <li><a href="#">c#教程</a></li>
      <li><a href="#">html教程</a></li>
      <li><a href="#">java教程</a></li>
    </ul>
  </li>
  <li class="child">
    螞蟻部落三
    <ul id="menu">
      <li><a href="#">搜尋優化</a></li>
      <li><a href="#">站長之家</a></li>
      <li><a href="#">dw教程</a></li>
      <li><a href="#">seaj教程</a></li>
    </ul>
  </li>
</ul>
</body>
</html>

上面的程式碼實現了簡單的二級下拉選單效果，下面介紹一下它的實現過程。

一.程式碼註釋:

（1）.window.onload=function(){}，當文件內容完全載入完畢再去執行函式中的程式碼。

（2）.var lis=document.getElementById("nav").getElementsByTagName('li')，獲取li元素集合。

（3）.for(var i=0;i<lis.length;i++){}，為每個class屬性值為child的元素註冊mouseover事件處理函式。

（4）.if(lis.className=="child")，判斷當前元素的class屬性值是否為child。

（5）.lis.onmouseover=function(){}，為當前元素註冊mouseover事件處理函式。

（6）.var ulObj=this.getElementsByTagName('ul')[0]，獲取li元素的第一個ul元素。

（7）.ulObj.style.display="block"，ul元素預設是隱藏的，滑鼠懸浮可以將其顯示。

（8）.this.style.backgroundColor="#ccc"，設定它的背景顏色。

（9）.this.style.color="black"，設定字型顏色。

二.相關閱讀:

（1）.className參閱js className一章節。

（2）.mouseover事件參閱javascript mouseover 事件一章節。 

（3）.getElementsByTagName()參閱document.getElementsByTagName()一張章節。 

（4）.mouseout事件參閱javascript mouseout一章節。

相關文章