jQuery實現的點選展開其他專案摺疊導航選單

antzone發表於2017-03-28
jQuery

導航選單大家都不會陌生，形式各種各樣，本章節介紹一種比較常見的導航選單。

當點選當前欄目的時候，本欄目會展開，其他的欄目就會摺疊。

程式碼例項:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
body{
  margin:0;
  padding:0 0 12px 0;
  font-size:12px;
  line-height:22px;
  font-family:"\5b8b\4f53", "Arial Narrow";
  background:#fff;
}
form, ul, li, p, h1, h2, h3, h4, h5, h6{
  margin:0;
  padding:0;
}
ul,li{
  list-style-type:none;
}
a{
  color:#00007F;
  text-decoration:none;
}
a:hover{
  color:#bd0a01;
  text-decoration:underline;
}
.box{
  width:150px;
  margin:0 auto;
}
.menu{
  overflow hidden;
  border-color:#C4D5DF;
  border-style:solid;
  border-width:0 1px 1px;
}
.menu li.level1 a{
  display:block;
  height:28px;
  line-height:28px;
  background:#EBF3F8;
  font-weight:700;
  color:#5893B7;
  text-indent:14px;
  border-top:1px solid #C4D5DF;
}
.menu li.level1 a:hover{
  text-decoration:none;
}
.menu li.level1 a.current{
  background:#B1D7EF;
}
 
.menu li ul{
  overflow:hidden;
}
.menu li ul.level2{
  display:none;
}
.menu li ul.level2 li a{
  display:block;
  height:28px;
  line-height:28px;
  background:#ffffff;
  font-weight:400;
  color:#42556B;
  text-indent:18px;
  border-top:0px solid #ffffff;
  overflow:hidden;
}
.menu li ul.level2 li a:hover{
  color:#f60;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
$(document).ready(function(){
  $(".level1 > a").click(function(){
    $(this).addClass("current")
    .next().show()
    .parent().siblings().children("a").removeClass("current")
    .next().hide();
    return false;
  }); 
});
</script>
</head>
<body>
<div class="box">
  <ul class="menu">
    <li class="level1"> 
      <a href="#none" >襯衫</a>
      <ul class="level2">
        <li><a href="#none">短袖襯衫</a></li>
        <li><a href="#none">長袖襯衫</a></li>
        <li><a href="#none">短袖T恤</a></li>
        <li><a href="#none">長袖T恤</a></li>
      </ul>
    </li>
    <li class="level1"> 
      <a href="#none">衛衣</a>
      <ul class="level2">
        <li><a href="#none">開襟衛衣</a></li>
        <li><a href="#none">套頭衛衣</a></li>
        <li><a href="#none">運動衛衣</a></li>
        <li><a href="#none">童裝衛衣</a></li>
      </ul>
    </li>
    <li class="level1"> 
      <a href="#none">褲子</a>
      <ul class="level2">
        <li><a href="#none">短褲</a></li>
        <li><a href="#none">休閒褲</a></li>
        <li><a href="#none">牛仔褲</a></li>
        <li><a href="#none">免燙卡其褲</a></li>
      </ul>
    </li>
  </ul>
</div>
</body>
</html>

上面的程式碼實現了基本的導航功能，下面就介紹一下它的實現過程。

一.程式碼註釋:

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

2.$(".level1 > a").click(function(){})，為class屬性值為level1的元素下第一級連結a元素註冊click事件處理函式，也就是為主導航註冊click事件處理函式。

3.$(this).addClass("current"),位當前主導航新增名稱為curent的樣式類，我們所看到的效果就是點選主導航背景會變色。

4.next().show()，將主導航後面的ul元素顯示，也就是展開子導航欄。

5..parent().siblings().children("a").removeClass("current"),level2的父元素是level1元素，siblings().children("a")可以獲取所有的主導航，然後移除名為current樣式類，也就是移除其他主導航的背景色。

6.next().hide()，然後將level2子導航隱藏。

7.return false，防止點選連結的時候出現跳轉效果。

二.相關閱讀:

1.level1>a可以參閱jQuery parent>child一章節。

2.addClass()可以參閱jQuery addClass()一章節。

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

4.parent()可以參閱jQuery parent()一章節。

5.siblings()可以參閱jQuery siblings()一章節。

6.children()可以參閱jQuery children()一章節。

7.removeClass()可以參閱jQuery removeClass()一章節。

8.return false可以參閱javascript中return false的作用是什麼一章節。

相關文章