Jquery实现显示和隐藏的4种简单方式_jquery



Html代码：
代码如下:

学习天地

1111111111

2222222222

333333333

4444444444

5555555555

6666666666

Jquery代码：
第一种实现方式：
代码如下:
1.
$(function(){
$(".topicList h3").click(function(){
var UL = $(this).next("ul");
if(UL.css("display")=="none"){
UL.css("display","block");
}
else{
UL.css("display","none");
}
});
});


第二种实现方式：
代码如下:
2.
$(function(){
$(".topicList h3").toggle(function(){
$(this).next("ul").hide(1000);
},function(){
$(this).next("ul").show(1000);
});
});


第三种实现方式：
可以使用Jquery提供的show和hide来完成带缓动的显示和隐藏效果，由于两个方法相似，可以直接使用toggle来完成。
代码如下:
3.
$(function(){
$(".topicList h3").toggle(function(){
$(this).next("ul").css("display","none");
},function(){
$(this).next("ul").css("display","block");
});
});


第四种实现方式：
toggle如果有两个参数，并且都是函数，表示第一次点击执行第一个函数，第二次点击执行第二个函数。
代码如下:
4.
$(function(){
$(".topicList h3").toggle(topicHandler,topicHandler);
function topicHandler(){
//使用fadeIn、show、slideDown可以完成某个容器的显示
//使用fadeOut、hide、slideUp可以完成某个容器的隐藏
//所以可以通过各个的toggle来完成两个之间的轮换
$(this).next("ul").toggle(1000);
}
});