Jquery實現顯示和隱藏的4種簡單方式_jquery

Html代碼：

複製代碼 代碼如下:

<div class="topicList">
<h3><span>學習天地</span></h3>
<ul>
<li>1111111111</li>
<li>2222222222</li>
<li>333333333</li>
<li>4444444444</li>
<li>5555555555</li>
<li>6666666666</li>
</ul>
</div>

Jquery代碼：
第一種實現方式：

複製代碼 代碼如下:

1. <script type="text/javascript">
$(function(){
$(".topicList h3").click(function(){
var UL = $(this).next("ul");
if(UL.css("display")=="none"){
UL.css("display","block");
}
else{
UL.css("display","none");
}
});
});
</script>

第二種實現方式：

複製代碼 代碼如下:

2. <script type="text/javascript">
$(function(){
$(".topicList h3").toggle(function(){
$(this).next("ul").hide(1000);
},function(){
$(this).next("ul").show(1000);
});
});
</script>

第三種實現方式：
可以使用Jquery提供的show和hide來完成帶緩動的顯示和隱藏效果，由於兩個方法相似，可以直接使用toggle來完成。

複製代碼 代碼如下:

3. <script type="text/javascript">
$(function(){
$(".topicList h3").toggle(function(){
$(this).next("ul").css("display","none");
},function(){
$(this).next("ul").css("display","block");
});
});
</script>

第四種實現方式：
toggle如果有兩個參數，並且都是函數，表示第一次點擊執行第一個函數，第二次點擊執行第二個函數。

複製代碼 代碼如下:

4. <script type="text/javascript">
$(function(){
$(".topicList h3").toggle(topicHandler,topicHandler);
function topicHandler(){
//使用fadeIn、show、slideDown可以完成某個容器的顯示
//使用fadeOut、hide、slideUp可以完成某個容器的隱藏
//所以可以通過各個的toggle來完成兩個之間的輪換
$(this).next("ul").toggle(1000);
}
});
</script>