jQuery三級導航選單詳解

admin發表於2018-11-30
jQuery

使用最多的可能是二級導航選單，網上程式碼一大堆，三級選單的程式碼也很多，相對較少一些。

本章節通過一個程式碼例項詳細介紹一下三級導航選單的實現過程。

程式碼例項如下: 

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE HTML> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style type="text/css">
* {
  margin:0px;
  padding:0px;
}
a {
  text-decoration:none;
  color:#000;
}
a:hover, a:linked {
  color:#000;
}
#nav {
  margin-left:20px;
  list-style:none;
}
#nav li，#nav li ul, #nav li ul li {
  list-style:none;
}
#nav li a {
  width:200px;
  height:30px;
  line-height:30px;
  background:#ccc;
  display:block;
  text-indent:10px;
}
#nav li ul li a {
  background:#eaeaea;
}
#nav li ul li ul li a {
  background:#fffff2;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(function (){
  $("#nav ul").hide();
  $("#nav li a:first-child").click(function(){
    $(this).siblings().toggle();
  });
});
</script>
</head>
<body>
    <ul id="nav">
      <li><a href="#">首頁管理</a>
        <ul>
          <li><a href="#">+首頁標題一</a>
            <ul>
              <li><a href="#">_首頁標題1_1</a> </li>
              <li><a href="#">_首頁標題1_2</a> </li>
            </ul>
          </li>
          <li><a href="#">首頁標題一</a></li>
          <li><a href="#">首頁標題二</a></li>
        </ul>
      </li>
      <li><a href="#">產品管理</a>
        <ul>
          <li><a href="#">產品標題一</a></li>
          <li><a href="#">產品標題二</a></li>
          <li><a href="#">產品標題三</a></li>
        </ul>
      </li>
    </ul>
</body>
</html>

一.實現原理:

在靜態結構方面主要使用ul和li的巢狀完成的:

一級導航結構: 

[HTML] 純文字檢視 複製程式碼
<ul>
  <li><a href="#">螞蟻部落</a></li>
</ul>

二級導航結構: 

[HTML] 純文字檢視 複製程式碼
<ul>
  <li>
    <a href="#">產品管理</a>
    <ul>
      <li><a href="#">產品標題1</a></li>
      <li><a href="#">產品標題2</a></li>
      <li><a href="#">產品標題3</a></li>
    </ul>
  </li>
</ul>

這個是二級導航的結構，三級導航就是再繼續巢狀。

本程式碼比較簡單，jQuery程式碼原理這裡就不介紹，具體參閱程式碼註釋。

二.程式碼註釋:

（1）.$(function (){})，當穩當結構完全載入完畢之後再去執行函式中的程式碼。

（2）.$("#nav ul").hide()，可以將id屬性值為nav下的ul全部設定為隱藏狀態，這就是為什麼在預設狀態下是合併的。

（3）.$("#nav li a:first-child").click(function(){})，可以為每一個li元素下的第一個a元素註冊click事件處理函式。

（4）.$(this).siblings().toggle()，實現當前點選元素的兄弟元素的顯示與隱藏的切換。

三.相關閱讀:

（1）.hide()參閱jQuery hide()方法一章節。

（2）.first-child參閱jQuery :first-child選擇器一章節。

（3）.siblings()參閱jQuery siblings()方法一章節。

（4）.toggle()參閱jQuery toggle()方法一章節。

相關文章