使用jquery控制div的顯示與隱藏，一句話就能搞定，例如：
1.$("#id").show()表示為display：block，
$("#id").hide()表示為display:none;
2.$("#id").toggle()切換元素的可見狀態(tài)。如果元素是可見的，切換為隱藏的；如果元素是隱藏的，則切換為可見的。
3.$("#id").css('display','none');//隱藏
$("#id").css('display','block');//顯示
或者
$("#id")[0].style.display='none';
display=none 控制對象的隱藏搜索
display=block控制對象的顯示
4.$("#id").css('visibility','hidden');//元素隱藏
$("#id").css('visibility','visible');//元素顯示
CSS visibility 屬性規(guī)定元素是否可見。
visible 元素可見。
hidden 元素不可見。
collapse 在表格元素中使用時，此值可刪除一行或一列，但它不影響表格的布局。被行或列占據(jù)的空間會留給其他內(nèi)容使用。如果此值被用在其他的元素上，會呈現(xiàn)為 "hidden"。
inherit 從父元素繼承 visibility 屬性的值。
注意：
display:none和visible:hidden都能把網(wǎng)頁上某個元素隱藏起來，在視覺效果上沒有區(qū)別，但是在一些DOM操作中兩者有區(qū)別:
display:none ---不為被隱藏的對象保留其物理空間，即該對象在頁面上徹底消失，通俗來說就是看不見也摸不到。
visible:hidden--- 使對象在網(wǎng)頁上不可見，但該對象在網(wǎng)頁上所占的空間沒有改變，即它仍然具有高度、寬度等屬性，通俗來說就是看不見但摸得到。
//第1種方法 ,給元素設(shè)置style屬性 $("#hidediv").css("display", "block"); //第2種方法 ,給元素換class，來實現(xiàn)隱藏div，前提是換的class樣式定義好了隱藏屬性 $("#hidediv").attr("class", "blockclass"); //第3種方法,通過jquery的css方法，設(shè)置div隱藏 $("#blockdiv").css("display", "none"); $("#hidediv").show();//顯示div $("#blockdiv").hide();//隱藏div下面是一些實例補充
Html代碼：
<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代碼：
第一種實現(xiàn)方式：
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>
第二種實現(xiàn)方式：
2. <script type="text/javascript">
$(function(){
$(".topicList h3").toggle(function(){
$(this).next("ul").hide(1000);
},function(){
$(this).next("ul").show(1000);
});
});
</script>
第三種實現(xiàn)方式：
可以使用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>
第四種實現(xiàn)方式：
toggle如果有兩個參數(shù)，并且都是函數(shù)，表示第一次點擊執(zhí)行第一個函數(shù)，第二次點擊執(zhí)行第二個函數(shù)。
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>
