JavaScript下拉摺疊導航選單講解

admin發表於2018-06-25
JavaScript

分享一段程式碼例項，它利用原生js實現了下拉摺疊導航選單效果。

並且詳細介紹一下它的實現過程，程式碼例項如下:

[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 auto;
  padding: 0px;
}
ul {
  margin: 0px;
  padding: 0px;
  width: 150px;
}
li {
  list-style-type: none;
  margin: 0px;
  padding: 0px;
}
.leftSidebar {
  margin: 0px auto;
  width: 500px;
}
.lmName {
  display: block;
  width: 150px;
  background: #f9f9f9;
  height: 30px;
  border: 1px solid #e5e5e5;
  padding-left: 15px;
  line-height: 30px;
}
.ejlmUl {
  display: none;
  width: 165px;
  border: 1px solid #e5e5e5;
}
.ejlmUl li {
  border-bottom: 1px dashed #e5e5e5;
  padding-left: 15px;
  font-size: 12px;
  line-height: 24px;
}
.action {
  display: block;
}
</style>
<script type="text/javascript">
function left(){
  var lmName = document.getElementsByClassName('lmName');
  for (var index = 0; index < lmName.length; index++) {
    lmName[index].index = index;
    lmName[index].onclick = function () {
      allNone();
      var ejlmUl = document.getElementsByClassName('ejlmUl');
      ejlmUl[this.index].style.display = 'block';
    }
  }
}
function allNone(){
  var ejlmUl = document.getElementsByClassName('ejlmUl');
  for (var index = 0; index < ejlmUl.length; index++) {
    ejlmUl[index].style.display = 'none';
  }
}         
window.onload = function () {
  left();
}
</script>
</head>
<body>
  <div class="leftSidebar">
    <ul id="leftUl">
      <li>
        <a class="lmName">螞蟻部落一</a>
        <ul class="ejlmUl action">
          <li class="ejlm">欄目11</li>
          <li class="ejlm">欄目11</li>
          <li class="ejlm">欄目11</li>
          <li class="ejlm">欄目11</li>
        </ul>
      </li>
      <li>
        <a class="lmName">螞蟻部落二</a>
        <ul class="ejlmUl">
          <li class="ejlm">欄目22</li>
          <li class="ejlm">欄目22</li>
          <li class="ejlm">欄目22</li>
          <li class="ejlm">欄目22</li>
        </ul>
      </li>
      <li>
        <a class="lmName">螞蟻部落三</a>
        <ul class="ejlmUl">
          <li class="ejlm">欄目33</li>
          <li class="ejlm">欄目33</li>
        </ul>
      </li>
    </ul>
  </div>
</body>
</html>

上面的程式碼實現了我們的要求，下面介紹一下它的實現過程。

一.程式碼註釋:

（1）.function left(){}，此函式實現了批量註冊事件處理函式功能。

（2）.var lmName = document.getElementsByClassName('lmName')，獲取class屬性值為lmName的元素集合。

（3）.for (var index = 0; index < lmName.length; index++) ,通過for迴圈批量註冊事件處理函式。

（4）.lmName[index].index = index，為當前元素新增一個index自定義屬性，並賦值為當前元素的索引。

（5）.lmName[index].onclick = function () {}，為當前元素註冊click事件處理函式。

（6）.allNone()，此函式可以將所有的選單摺疊。

（7）.var ejlmUl = document.getElementsByClassName('ejlmUl'),獲取class屬性值為ejlmUl的元素集合。

（8）.ejlmUl[this.index].style.display = 'block'，將對應索引的元素顯示出來。

二.相關閱讀:

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

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

相關文章