13518219792
jQuery 效果 - 隐藏和显示
成都创新互联公司专注于网站建设，为客户提供成都做网站、成都网站制作、网页设计开发服务，多年建网站服务经验，各类网站都可以开发，品牌网站设计，公司官网，公司展示网站，网站设计，建网站费用，建网站多少钱，价格优惠，收费合理。
jQuery hide() 和 show()
通过 jQuery，您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素：
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
语法：
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。
下面的例子演示了带有 speed 参数的 hide() 方法：
实例
$("button").click(function(){ $("p").hide(1000);});
jQuery toggle()
通过 jQuery，您可以使用 toggle() 方法来切换 hide() 和 show() 方法。
显示被隐藏的元素，并隐藏已显示的元素：
实例
$("button").click(function(){ $("p").toggle();});
语法：
$(selector).toggle(speed,callback);
可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是 toggle() 方法完成后所执行的函数名称。
Html代码：
复制代码
代码如下:
div
class="topicList"
h3span学习天地/span/h3
ul
li1111111111/li
li2222222222/li
li333333333/li
li4444444444/li
li5555555555/li
li6666666666/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
1、jquery.show()和jquery.hide()方法
语法：
$(selector).show(speed,callback);
$(selector).hide(speed,callback);
2、jquery.toggle()方法
语法：
$(selector).toggle(speed,callback);
3、带有淡入淡出效果的显示和隐藏
$(selector).fadeIn(speed,callback)
$(selector).fadeOut(speed,callback)
$(selector).fadeToggle(speed,callback)
$(selector).fadeTo(speed,opacity,callback)
4、带有滑动效果的显示和隐藏
$(selector).slideDown(speed,callback)
$(selector).slideUp(speed,callback)
$(selector).slideToggle(speed,callback)
注意：
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。
JQuery中元素是否显示或者隐藏，有两种方式，主要通过获取元素节点的hidden和visible两个属性来进行判断，代码如下：
var
node=$('#id');
第一种写法
if(node.is(':hidden')){//如果node是隐藏的则显示node元素，否则隐藏
node.show();
}else{
node.hide();
}
第二种写法
if(!node.is(':visible')){//如果node是隐藏的则显示node元素，否则隐藏
node.show();
}else{
node.hide();
}
if(node.is(':visible')){//如果node是显示的则隐藏node元素，否则显示
node.hide();
}else{
node.show();
}
button id="trigger" Trigger/button
div id="cont1"Hello/div
div id="cont2"World/div
#cont1{
display:none
}
$('#trigger').click(function(){
$('cont1').toggle();
$('cont2').toggle();
});
以上是严格按照你的描述实现，就是使用toggle().
