jQuery手風琴導航選單詳解

antzone發表於2017-04-10
jQuery

本章節分享一個程式碼例項，它實現了簡單的手風琴導航選單效果。

下面詳細介紹一下它的實現過程，需要的朋友可以做一下參考。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
* {
  margin: 0;
  padding: 0;
}
ul {
  list-style: none;
}
.nav ul {
  display: none;
}
.nav ul li {
  width: 100px;
  text-align: center;
  cursor: pointer;
}
.nav div {
  background: #4ecc70;
  width: 100px;
  border-radius: 10px;
  line-height: 34px;
  text-align: center;
  color: white;
  cursor: pointer;
}
.red {
  background: red;
  border-radius: 10px;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
$(function () {
  var changeType = $('.nav').find('div');
  $.each(changeType, function () {
    $(this).on('click', function () {
      if (false == $(this).next().is(':visible')) {
        $('.nav ul').slideUp(300);
      }
      $(this).next().slideToggle(300);
    })
    $('.nav ul:eq(0)').show();
  })
  var hoverType = $('.nav .u').find('li')
  $.each(hoverType, function () {
    $(this).hover(function () {
      $(this).addClass('red').siblings().removeClass('red');
    })
  })
})
</script>
</head>
<body>
<ul class="nav">
  <li>
    <div>前端</div>
    <ul class="u">
      <li>div教程</li>
      <li>css教程</li>
      <li>html教程</li>
      <li>js教程</li>
    </ul>
  </li>
  <li>
    <div>資源</div>
    <ul class="u">
      <li>特效</li>
      <li>模板</li>
      <li>程式碼</li>
      <li>書籍</li>
    </ul>
  </li>
  <li>
    <div>討論</div>
    <ul class="u">
      <li>交流</li>
      <li>分享</li>
      <li>互助</li>
      <li>問答</li>
    </ul>
  </li>
</ul>
</body>
</html>

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

一.程式碼註釋:

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

（2）.var changeType = $('.nav').find('div')，獲取class屬性值為nav元素下的div元素集合。

（3）.$.each(changeType, function () {})，遍歷changeType集合中的每一個div元素。

（4）.$(this).on('click', function () {})，為當前的div元素註冊click事件處理函式。

（5）.if (false == $(this).next().is(':visible')) {

  $('.nav ul').slideUp(300);

}

如果當前div元素的下一個元素，也就是ul元素不是顯示狀態.

那麼首先首先將所有的ul元素收起（這個保證了只有一個ul元素是展開狀態）。

（6）.$(this).next().slideToggle(300),展開和關閉的切換。

（7）.$('.nav ul:eq(0)').show()，設定第一個ul元素預設是展開的。

（8）.var hoverType = $('.nav .u').find('li')，獲取ul元素下所有的li元素。

（9）.$.each(hoverType, function () {

  $(this).hover(function () {

    $(this).addClass('red').siblings().removeClass('red');

})

})，為每一個li元素註冊hover事件處理函式，設定當滑鼠懸浮時，背景色變紅，移開時恢復。

二.相關閱讀:

（1）.find()可以參閱jQuery find()一章節。

（2）.$.each()可以參閱jQuery.each()一章節。

（3）.on()可以參閱jquery on()一章節。

（4）.next()可以參閱jQuery next()一章節。

（5）.is()可以參閱jQuery is()一章節。

（6）.slideUp()可以參閱jQuery slideUp()一章節。

（7）.slideToggle()可以參閱jQuery slideToggle()一章節。

（8）.:eq()可以參閱jQuery :eq()一章節。

（9）.:visible可以參閱jQuery :visible一章節。

（10）.hover()可以參閱jQuery hover事件一章節。

（11）.addClass()可以參閱jQuery addClass()一章節。

（12）.siblings()可以參閱jQuery siblings()一章節。

相關文章