Jquery显示和隐藏的4种简单方法

时间：2023-02-11 10:19:11
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代码： 
第一种实现方式： 
< 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 > 
第二种实现方式： 
< 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来完成。 
< script  type ="text/javascript" > 
$( function(){ 
$(".topicList h3").toggle( function(){ 
$( this).next("ul").css("display","none"); 
}, function(){ 
$( this).next("ul").css("display","block"); 
}); 
}); 
</ script > 
第四种实现方式： 
toggle如果有两个参数，并且都是函数，表示第一次点击执行第一个函数，第二次点击执行第二个函数。 
< script  type ="text/javascript" > 
$( function(){ 
$(".topicList h3").toggle(topicHandler,topicHandler); 
function topicHandler(){  // by www.jbxue.com
// 使用fadeIn、show、slideDown可以完成某个容器的显示 
// 使用fadeOut、hide、slideUp可以完成某个容器的隐藏 
// 所以可以通过各个的toggle来完成两个之间的轮换 
$( this).next("ul").toggle(1000); 
} 
}); 
</ script > 
标签：

相关文章