jQuery垂直手風琴導航選單詳解

admin發表於2017-10-23
jQuery

豎向二級選單在各種網站都有應用，本站也有采用，比如帖子列表的側欄。

可以有效的展現分類的層級關係，也能節省更多網頁空間。

下面就通過程式碼例項介紹一下如何實現此效果。

程式碼如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
ul#sidemenu, ul#sidemenu ul{
  list-style-type:none;
  margin:0;
  padding:0;
  width:185px;
}
ul#sidemenu a{
  display:block;
  text-decoration:none;
}
ul#sidemenu li{margin:5px auto;}
ul#sidemenu li a{
  background:#333;
  font-size:12px;
  color:#fff;
  height:28px;
  line-height:28px;
  padding-left:5px;
}
ul#sidemenu li a: hover{background:#000;}
ul#sidemenu li ul li a{
  background:#ccc;
  color:#000;
  padding-left:20px;
}
ul#sidemenu li ul li a: hover{
  background:#aaa;
  border-left:5px #000 solid;
  padding-left:15px;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
function initMenu(){
  $('#sidemenu ul').hide();
  $('#sidemenu li a').click(function(){
    var checkElement = $(this).next();
    if((checkElement.is('ul')) && (checkElement.is(':visible'))) 
    {
      return false;
    }
    if((checkElement.is('ul')) && (!checkElement.is(':visible'))) 
    {
      $('#sidemenu ul:visible').slideUp('normal');
      checkElement.slideDown('normal');
      return false;
    }
  });
}
$(document).ready(function(){
  initMenu();
})
</script>
</head>
<body>
<div class="leftbar">
  <ul id="sidemenu">
    <li><a href="#">+ 網頁選單類素材一</a>
      <ul>
        <li><a href="#">下滑選單</a></li>
        <li><a href="#">摺疊選單</a></li>
        <li><a href="#">垂直選單</a></li>
      </ul>
    </li>
    <li><a href="#">+ 程式設計原始碼類資源</a>
      <ul>
        <li><a href="#">ASP原始碼</a></li>
        <li><a href="#">Delphi原始碼</a></li>
        <li><a href="#">vc++原始碼</a></li>
        <li><a href="#">VB原始碼</a></li>
      </ul>
    </li>
  </ul>
</div>
</body>
</html>

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

一.程式碼註釋:

（1）.function initMenu(){}，此函式實現了下拉選單效果。

（2）.$('#sidemenu ul').hide()，將id屬性值為sidemenu 元素下的ul元素隱藏，也就是選單處於摺疊狀態。

（3）. $('#sidemenu li a').click(function(){})，為a元素註冊事件click事件處理函式。

（4）.var checkElement = $(this).next()，獲取當前被點選的a元素的緊鄰的下一個同級元素物件。

（5）.if((checkElement.is('ul')) && (checkElement.is(':visible'))) {return false}，如果checkElement是ul元素且是可見的，那麼跳出事件處理函式的執行，並且可以防止連結的跳轉現象。

（6）.if((checkElement.is('ul')) && (!checkElement.is(':visible'))) ,判斷checkElement是否是ul元素且不可見。

（7）.$('#sidemenu ul:visible').slideUp('normal'),將處於可見狀態的ul元素收起。

（8）.checkElement.slideDown('normal')，當前被點選的連結下的ul元素下拉展開。

（9）.return false，可以防止連結的跳轉現象。

二.相關閱讀:

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

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

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

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

（5）.slideUp()參閱jQuery slideUp()方法一章節。

（6）.slideDown()參閱jQuery slideDown()方法一章節。  

（7）.return false參閱jQuey中的return false作用是什麼一章節。

相關文章