jQuery 動畫方式展開或者收縮垂直導航選單

admin發表於2019-01-31
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{ 
  font-family: Arial; 
  font-size: 16px; 
}
dl{width:300px;}
dl,dd{margin:0;}
dt{
  background-color:#ae8758; 
  background-repeat:no-repeat; 
  background-position:5px 13px; 
  font-size:18px; 
  padding:5px 5px 5px 20px; 
  margin:2px; 
  height:29px; 
  line-height:28px; 
}
dt a{ 
  color:#FFF; 
  text-decoration:none; 
}
dd a{ 
  color:#000; 
}
ul{ 
  list-style:none; 
  padding:5px 5px 5px 20px; 
  margin:0;
}
li{line-height:24px;}
.bg{ background-position:5px -16px;}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> 
<script type="text/javascript">
$(document).ready(function(){
  $("dd").hide();
  $("dt a").click(function(){
    $(this).parent().next().slideToggle();
    $(this).parent().prevAll("dd").slideUp("slow");
    $(this).parent().next().nextAll("dd").slideUp("slow");
    return false;
  });
});
</script>
</head>
<body>
<dl>
  <dt><a href="#">鄭州美食</a></dt>
  <dd>
    <ul>
      <li><a href="#">美食論壇</a></li>
      <li><a href="#">地方小吃</a></li>
      <li><a href="#">鄭州酒店</a></li>
    </ul>
  </dd>
  <dt><a href="#">鄭州交通</a></dt>
  <dd>
    <ul>
      <li><a href="#">新鄭機場</a></li>
      <li><a href="#">周邊高速</a></li>
    </ul>
  </dd>
  <dt><a href="#">鄭州房產</a></dt>
  <dd>
    <ul>
      <li><a href="#">房產論壇</a></li>
      <li><a href="#">大河論壇</a></li>
      <li><a href="#">天下中原</a></li>
    </ul>
  </dd>
</dl>
</body>
</html>

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

一.程式碼註釋:

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

（2）.$("dd").hide()，隱藏所有的dd元素，也就是二級導航選單全部隱藏。

（3）.$("dt a").click(function(){})，為所有的連結a元素click事件處理函式。

（4）.$(this).parent().next().slideToggle()，獲取當前連結元素的父級元素（也就是dt元素）的下一個元素（也就是dd元素），然後呼叫slideToggle()方法，實現了展開和收縮的切換效果，也就是如果當前是展開的，點選以後就會收縮，如果當前是收縮的，那麼點選就會展開。

（5）.$(this).parent().prevAll("dd").slideUp("slow")，這個可以將所有當前點選連結的前面的dd元素收縮。

（6）.$(this).parent().next().nextAll("dd").slideUp("slow")，這個可以將所有當前點選連結的後面的dd元素收縮。

（7）.return false，這兒也很重要，可以防止連結跳轉動作。

二.相關閱讀:

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

（2）.parent()方法參閱jQuery parent()一章節。

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

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

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

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

（7）.nextAll()方法參閱jQuery nextAll()一章節。

（8）.return false參閱JavaScript return false一章節。

相關文章