整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
html頁(yè)面，顯示的內(nèi)容太多，會(huì)影響用戶體驗(yàn)，如果有一些，點(diǎn)擊才出現(xiàn)的內(nèi)容，就可以減少內(nèi)容的干擾。使用jquery就可以很快的實(shí)現(xiàn)。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>div隱藏測(cè)試</title>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js">
</script>
</head>
<body>
<button id="controller">隱藏或者顯示</button>
<div id="contents" style="display: none;">
<p>div的內(nèi)容</p>
</div>
<script>
$("#controller").click(function () {
if ($("#contents").is(":hidden")) {
$("#contents").show()
} else {
$("#contents").hide()
}
})
</script>
</body>
</html>
$("#contents").is(":hidden") 可以判斷是否是隱藏
$("#contents").show() 表示display:block,
$("#contents").hide() 表示display:none;
操作元素的屬性
$("#contents").attr("style","display:none;"); //隱藏div
$("#contents").attr("style","display:block;"); //顯示div
也可以操作css屬性
$("#contents").css("display","none"); //隱藏div
$("#contents").css("display","block"); //顯示div
也可以直接使用toggle轉(zhuǎn)換開(kāi)關(guān)實(shí)現(xiàn)
$("#contents").toggle()
個(gè)視頻來(lái)說(shuō)一個(gè)有時(shí)候前端面試會(huì)問(wèn)到的CSS的面試題，就是讓元素隱藏的這幾種方式，它們具體的用法和區(qū)別。具體去用我相信大家都用過(guò)，但是要把這個(gè)題回答的很好，把它們之間的區(qū)別捋清，不妨來(lái)說(shuō)一下。
這里寫(xiě)了兩個(gè)div，一個(gè)紅色、一個(gè)藍(lán)色，現(xiàn)在把紅色這個(gè)給它隱藏掉，上面寫(xiě)的3種方法都可以把它隱藏掉。區(qū)別在哪里？
·先來(lái)試一下opacity，紅色的div確實(shí)不見(jiàn)了。
·再來(lái)試一下第二種visibility，刷新一下，紅色的div也是看不見(jiàn)了，好像和第一種方法沒(méi)什么區(qū)別。
·最后來(lái)試一下display，這種方法，紅色的div不單止不見(jiàn)了，連藍(lán)色的div它的位置也發(fā)生改變了。
先來(lái)說(shuō)一下前面兩種，因?yàn)榍懊鎯煞N方式，它們表現(xiàn)出來(lái)的形式實(shí)在太像了。現(xiàn)在用的是opacity，其實(shí)是改變了元素的透明度，也就是讓它完全透明了，所以才看不到它。但實(shí)際上它還是存在的，還是在這里的，只是看不到而已。所以這個(gè)方式，它是需要對(duì)元素所占的空間的給它排列出來(lái)，也就是它還是占的這個(gè)空間的。
其次不光是把它所占的空間排列出來(lái)，瀏覽器還需要對(duì)元素進(jìn)行渲染，只不過(guò)是把它渲染成透明的，它還是存在的，所以是可以對(duì)它進(jìn)行交互操作的，這一點(diǎn)等一下可以通過(guò)js去證明。
接著就是把visibility設(shè)置成hidden，這一個(gè)的排列方式和剛才設(shè)置透明度的是一樣的，但是它們有什么區(qū)別？這個(gè)看得出來(lái)，還是需要對(duì)它所占的空間進(jìn)行排列的，它還是占著那個(gè)位置的，但是它也僅僅是占著那個(gè)空間而已。瀏覽器已經(jīng)不對(duì)元素進(jìn)行渲染了，所以空間給你保留，但是元素不存在，就沒(méi)辦法進(jìn)行交互了。
最后就是display為none，很明顯藍(lán)色的div它的位置已經(jīng)改變了，它占據(jù)了原本紅色div的位置，也就是紅色div原本的那個(gè)位置空間已經(jīng)沒(méi)有了。其實(shí)這種方式，已經(jīng)不是單純的把元素給隱藏了，已經(jīng)是把元素的核模型給修改了，直接就把這個(gè)元素給干沒(méi)了，所以它是既不排列也不渲染。
如果是作為一個(gè)面試題來(lái)回答，最好還回答到一點(diǎn)，在這三個(gè)里面來(lái)比較，opacity透明度的這種方式它是最消耗性能的，因?yàn)椴粏沃挂獛湍惆盐恢每粘鰜?lái)，還要完完全全的把你給渲染出來(lái)，只不過(guò)是渲染成透明的，所以它是這三個(gè)里面最消耗性能的。
visibility它就是沒(méi)那么消耗性能，因?yàn)檫@個(gè)只是給它保留個(gè)位置，保留個(gè)空間就可以了，不用對(duì)它進(jìn)行渲染，所以它就沒(méi)那么消耗性能，display的方式就是完全不消耗性能了。
最后再來(lái)看一下用opacity這個(gè)元素是不是真的還存在，還可以交互，然后用visibility就已經(jīng)不可以交互了，這里再把它改成opacity，來(lái)寫(xiě)一下js，這里很簡(jiǎn)單，就給它添加一個(gè)點(diǎn)擊事件，因?yàn)檫@個(gè)元素它還存在，肯定就可以點(diǎn)得到它。
把鼠標(biāo)移到這個(gè)位置，看一下這個(gè)元素還存不存在，還可不可以點(diǎn)擊得到它，點(diǎn)擊一下，發(fā)現(xiàn)沒(méi)有，可以彈出這個(gè)OK，證明這個(gè)元素它還是存在的，只不過(guò)看不到它而已。再把前面給它改一下，改成visibility的方式，再來(lái)點(diǎn)這個(gè)位置，現(xiàn)在無(wú)論我怎么點(diǎn)它都沒(méi)有反應(yīng)了，因?yàn)檫@個(gè)元素它壓根就不存在了，只是空著這個(gè)位置在這里而已。
這個(gè)視頻就到這里，感謝大家的收看。
][1]
jQuery本身沒(méi)有這樣一個(gè)事件，要實(shí)現(xiàn)這個(gè)效果，我們首先要先了解javascript中的事件冒泡。
冒泡定義：當(dāng)一個(gè)元素上的事件被觸發(fā)的時(shí)候，比如說(shuō)鼠標(biāo)點(diǎn)擊了一個(gè)按鈕，同樣的事件將會(huì)在那個(gè)元素的所有祖先元素中被觸發(fā)。這一過(guò)程被稱為事件冒泡；這個(gè)事件從原始元素開(kāi)始一直冒泡到DOM樹(shù)的最上層。（摘自網(wǎng)絡(luò)）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Click
上述代碼運(yùn)行后，點(diǎn)擊鏈接，以此會(huì)出現(xiàn)link, inner, outer, document,轉(zhuǎn)向百度。
也就是說(shuō)我們點(diǎn)擊鏈接后 click事件一直冒泡傳遞在最外層body。
1. 阻止事件冒泡, 并不阻止事件行為：event.stopPropagation();
$(function() {
$("#link").click(function(event) {
event.stopPropagation();
});});上述代碼運(yùn)行后，點(diǎn)擊鏈接，按順序會(huì)出現(xiàn)link, 轉(zhuǎn)向百度。
2. 阻止事件行為，并阻止事件冒泡 ：event.preventDefault();
$(function() {
$("#link").click(function(event) {
event.preventDefault();
});});上述代碼運(yùn)行后，點(diǎn)擊鏈接，按順序會(huì)出現(xiàn)link, inner, outer, document, 但是不轉(zhuǎn)向百度。
3. 阻止事件冒泡, 也阻止事件行為：return false;
$(function() {
$("#link").click(function(event) {
return false;
});});上述代碼運(yùn)行后，點(diǎn)擊鏈接，只會(huì)出現(xiàn)link。
因此我們可以看出事件冒泡不一定是個(gè)壞的東西，有些情況會(huì)讓不同層次捕獲不同的事件！
所以鼠標(biāo)點(diǎn)擊Div區(qū)域外隱藏Div正需要用到事件冒泡。
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
