JavaScript可摺疊屬性導航選單

antzone發表於2018-05-22
JavaScript

可摺疊的樹形導航選單在很多網站都有應用，特別是在組織分類方面更是如此，優點是很明顯的。

比如可以有效的組織分類，並且通過摺疊效果可以節省網頁空間和提高分類的辨識度。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
*{
  margin:0px;
  padding:0px;
}
body{
  background-color:#FFF;
  font-size:12px;
}
div{margin-bottom:10px;}
#box{
  width:300px;
  height:300px;
  margin:0px auto;
}
ul.menu{
  display:none;
  list-style-type:none;
  margin-top:5px;
  margin-left:10px;
}
a{
  color:black;
  text-decoration:none;
}
</style>
<script type="text/javascript"> 
function getStyle(obj,attr){   
  var ie = !+"\v1";   
  if(attr=="backgroundPosition"){     
    if(ie){               
      return obj.currentStyle.backgroundPositionX+" "+obj.currentStyle.backgroundPositionY;    
    }   
  }   
  if(obj.currentStyle){     
    return obj.currentStyle[attr];   
  }   
  else{     
    return document.defaultView.getComputedStyle(obj,null)[attr];   
  } 
} 
  
window.onload=initAll; 
function initAll(){ 
  var allLinks=document.getElementsByTagName("a"); 
  for(var index=0;index<allLinks.length;index++){ 
    if(allLinks[index].className.indexOf("menuLink")>-1){ 
      allLinks[index].onclick=toggleMenu; 
    } 
  } 
} 
function toggleMenu(){ 
  parentNode=this.parentNode;
  childrenNode=parentNode.children;
  for(var index=0;index<childrenNode.length;index++){
    if(childrenNode[index].tagName=="UL"){
      if(getStyle(childrenNode[index],"display")=="none"){
        childrenNode[index].style.display="block";
      }
      else{
        childrenNode[index].style.display="none";
      }
    }
  }
} 
</script>
</head>
<body>
<div id="box">
  <div><a href="#" class="menuLink">前端教程</a>
    <ul class="menu">
      <li><a href="#">div css教程</a></li>
      <li><a href="#">javascript教程</a></li>
      <li><a href="#">jQuery教程</a></li>
      <li><a href="#">正規表示式教程</a></li>
    </ul>
  </div>
  <div><a href="#" class="menuLink">資源專區</a>
    <ul class="menu">
      <li><a href="#">手機網站演示</a></li>
      <li><a href="#">電腦網站演示</a></li>
      <li><a href="#">特效下載</a></li>
    </ul>
  </div>
  <div><a href="#" class="menuLink">搜尋優化</a>
    <ul class="menu">
      <li><a href="#">網站運營</a></li>
      <li><a href="#">站長交流</a></li>
    </ul>
  </div>
</div>
</body>
</html>

以上程式碼實現了我們的要求，可以實現展開和摺疊的樹形選單效果，下面介紹一下它的實現過程。

一.程式碼註釋：

（1）.function getStyle(obj,attr){}函式可以參閱js如何獲取樣式表中定義的css屬性值一章節。 

（2）.window.onload=initAll，為onload事件註冊事件處理函式。

（3）.var allLinks=document.getElementsByTagName("a")，所有的連結a物件集合。

（3）.for(var i=0;i<allLinks.length;i++){}，遍歷每一個連結物件。

（4）.if(allLinks.className.indexOf("menuLink")>-1){allLinks.onclick=toggleMenu;}，如果當前連結a元素具有名為menuLink樣式類，也就是主導航連結，就會為其註冊onclick事件處理函式。

（5）.function toggleMenu(){}，主導航onclick事件處理函式。

（6）.parentNode=this.parentNode，獲取當前主導航的父元素。

（7）.childrenNode=parentNode.children，獲取父元素的所有元素子節點集合。

（8）.for(var index=0;index<childrenNode.length;index++){}，遍歷元素子節點集合。

（9）.if(childrenNode[index].tagName=="UL")，判斷子元素的標籤名稱是否為ul。

（10）.if(getStyle(childrenNode[index],"display")=="none"){

     childrenNode[index].style.display="block";

}

else{

  childrenNode[index].style.display="none";

}

判斷ul元素是否是隱藏，如果隱藏就顯示，如果顯示就隱藏。

二.相關閱讀：

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

（2）.className屬性參閱js className一章節。

（3）.indexOf()方法參閱javascript indexof()一章節。 

（4）.parentNode屬性參閱parentNode一章節。 

（5）.children屬性參閱javascript children一章節。 

（6）.tagName屬性參閱javascipt tagName一章節。

相關文章