如何通过jquery隐藏和显示元素

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() 方法完成后所执行的函数名称。

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

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

jQuery里面隐藏和显示效果怎么写?

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 元素是否显示与隐藏

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();

}

jquery实现隐藏与显示的功能

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().