垂直可伸縮的導航選單例項程式碼

admin發表於2017-03-01
單例
可以伸縮的才會垂直導航選單在網站中有大量的使用，為了節省空間，一般情況下，只有第一個選單是展開的，其他都是摺疊的，只有當點選其他主選單的時候才會被展開，下面就通過例項程式碼來介紹一下如何實現此功能。

程式碼例項如下:

[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;
}
div{
  border:1px solid black;
  width:100px;
  font-size:12px;
  margin:50px auto;
}
ul{list-style-type:none;}
.title{
  background-color:#0094ff;
  border-bottom:1px solid White;
  color:White;
  padding:2px 2px;
  cursor:pointer;
  font-size:14px;
  text-align:center
}
.menu .content li{
  height:25px;
  line-height:25px;
  text-align:center;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){
  $(".content").hide();
  $(".title").click(function(){
    $(this).next().slideDown().parent().siblings().children(".content").slideUp();
  }).first().next().slideDown();
});
</script>
</head>
<body>
<div>
  <ul class="menu">
    <li class="title">主選單一</li>
    <li class="content">
      <ul>
        <li>螞蟻部落一</li>
        <li>螞蟻部落二</li>
        <li>螞蟻部落三</li>
        <li>螞蟻部落四</li>
      </ul>
    </li>
  </ul>
  <ul class="menu">
    <li class="title">主選單二</li>
    <li class="content">
      <ul>
        <li>螞蟻部落一</li>
        <li>螞蟻部落二</li>
        <li>螞蟻部落三</li>
        <li>螞蟻部落四</li>
      </ul>
    </li>
  </ul>
  <ul class="menu">
    <li class="title">主選單三</li>
    <li class="content">
      <ul>
        <li>螞蟻部落一</li>
        <li>螞蟻部落二</li>
        <li>螞蟻部落三</li>
        <li>螞蟻部落四</li>
      </ul>
    </li>
  </ul>
</div>
</body>
</html>

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

一.實現原理:

原理其實非常的簡單，首先通過hide()函式將所有的content元素隱藏，然後為每一個content元素註冊click事件處理函式，當點選title元素的時候，能夠將它下一個同級元素顯示，並且將此元素的父元素的兄弟元素中class屬性值為content的子元素隱藏，同時在預設情況下將第一個content元素設定為顯示。

二.相關閱讀:

1.hide()函式可以參閱jQuery hide()一章節。 

2.click事件可以參閱jQuery click事件一章節。 

3.next()函式可以參閱jQuery next()一章節。 

4.slideDown()函式可以參閱jQuery slideDown()一章節。 

5.parent()函式可以參閱jQuery parent()一章節。

6.siblings()函式可以參閱jQuery siblings()一章節。

7.children()函式可以參閱jQuery children()一章節。 

8.slideUp()函式可以參閱jQuery slideUp()一章節。 

9.first()函式可以參閱jQuery first()一章節。

相關文章