欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Jquery實(shí)現(xiàn)顯示和隱藏的4種簡(jiǎn)單方式

 更新時(shí)間：2013年08月28日 18:47:41   投稿：whsnow  
顯示和隱藏的效果想必大家都有見(jiàn)到過(guò)吧，其實(shí)很簡(jiǎn)單，通過(guò)jquery便可輕松實(shí)現(xiàn)，下面為大家整理了4種方式，大家可以根據(jù)需求自由選擇

使用jquery控制div的顯示與隱藏，一句話就能搞定，例如：

1.$("#id").show()表示為display：block，
$("#id").hide()表示為display:none;

2.$("#id").toggle()切換元素的可見(jiàn)狀態(tài)。如果元素是可見(jiàn)的，切換為隱藏的；如果元素是隱藏的，則切換為可見(jiàn)的。

3.$("#id").css('display','none');//隱藏
$("#id").css('display','block');//顯示

或者

$("#id")[0].style.display='none';

　　display=none 控制對(duì)象的隱藏搜索
　　display=block控制對(duì)象的顯示

4.$("#id").css('visibility','hidden');//元素隱藏

$("#id").css('visibility','visible');//元素顯示

CSS visibility 屬性規(guī)定元素是否可見(jiàn)。

visible　元素可見(jiàn)。
hidden　元素不可見(jiàn)。
collapse　在表格元素中使用時(shí)，此值可刪除一行或一列，但它不影響表格的布局。被行或列占據(jù)的空間會(huì)留給其他內(nèi)容使用。如果此值被用在其他的元素上，會(huì)呈現(xiàn)為 "hidden"。
inherit　從父元素繼承 visibility 屬性的值。

注意：

display:none和visible:hidden都能把網(wǎng)頁(yè)上某個(gè)元素隱藏起來(lái)，在視覺(jué)效果上沒(méi)有區(qū)別，但是在一些DOM操作中兩者有區(qū)別:
display:none ---不為被隱藏的對(duì)象保留其物理空間，即該對(duì)象在頁(yè)面上徹底消失，通俗來(lái)說(shuō)就是看不見(jiàn)也摸不到。
visible:hidden--- 使對(duì)象在網(wǎng)頁(yè)上不可見(jiàn)，但該對(duì)象在網(wǎng)頁(yè)上所占的空間沒(méi)有改變，即它仍然具有高度、寬度等屬性，通俗來(lái)說(shuō)就是看不見(jiàn)但摸得到。

//第1種方法 ,給元素設(shè)置style屬性 
$("#hidediv").css("display", "block"); 
//第2種方法 ,給元素?fù)Qclass，來(lái)實(shí)現(xiàn)隱藏div，前提是換的class樣式定義好了隱藏屬性 
$("#hidediv").attr("class", "blockclass"); 
//第3種方法,通過(guò)jquery的css方法，設(shè)置div隱藏 
$("#blockdiv").css("display", "none"); 
 
$("#hidediv").show();//顯示div  
$("#blockdiv").hide();//隱藏div

下面是一些實(shí)例補(bǔ)充

Html代碼：

復(fù)制代碼 代碼如下:

<div class="topicList">
<h3><span>學(xué)習(xí)天地</span></h3>
<ul>
<li>1111111111</li>
<li>2222222222</li>
<li>333333333</li>
<li>4444444444</li>
<li>5555555555</li>
<li>6666666666</li>
</ul>
</div>

Jquery代碼：
第一種實(shí)現(xiàn)方式：
復(fù)制代碼 代碼如下:

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>

第二種實(shí)現(xiàn)方式：
復(fù)制代碼 代碼如下:

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

第三種實(shí)現(xiàn)方式：
可以使用Jquery提供的show和hide來(lái)完成帶緩動(dòng)的顯示和隱藏效果，由于兩個(gè)方法相似，可以直接使用toggle來(lái)完成。
復(fù)制代碼 代碼如下:

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

第四種實(shí)現(xiàn)方式：
toggle如果有兩個(gè)參數(shù)，并且都是函數(shù)，表示第一次點(diǎn)擊執(zhí)行第一個(gè)函數(shù)，第二次點(diǎn)擊執(zhí)行第二個(gè)函數(shù)。
復(fù)制代碼 代碼如下:

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

相關(guān)文章

最新評(píng)論