div的顯示和隱藏切換程式碼例項

admin發表於2017-02-24
點選一個按鈕實現div的顯示和隱藏的切換是常有的操作，下面就是實現此效果的一個程式碼例項。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="author" content="http://www.softwhy.com/" />
<title>div的顯示和隱藏的切換-螞蟻部落</title>
<style type="text/css">
* {
  margin:0;
  padding:0;
}
body {
  font-size:15px;
}
#container {
  margin:60px;
  line-height:2em;
  width:300px;
  border:1px solid #CCC;
}
.head {
  background:#999;
  padding:5px;
  cursor:pointer;
}
.content {
  text-indent:15px;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript"> 
$(function(){ 
  $("h5.head").hover(function(){ 
    $("div.content").slideUp(3000); 
  },function(){ 
    $("div.content").slideDown(3000); 
  })
}) 
</script>
</head>
<body>
<div id="container">
  <h5 class="head">螞蟻部落</h5>
  <div class="content">螞蟻部落歡迎您，螞蟻部落提供簡單常用的基礎教程</div>
</div>
</body>
</html>

以上程式碼實現了我們要求，當滑鼠移動到標題的時候，能夠實現以動畫方式實現的隱藏和顯示的切換效果，由於程式碼比較簡單，這裡就不多介紹了，具體可以參閱相關閱讀。

相關閱讀:

1.hover事件可以參閱jQuery hover事件一章節。

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

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

相關文章