整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
html頁面，顯示的內容太多，會影響用戶體驗，如果有一些，點擊才出現的內容，就可以減少內容的干擾。使用jquery就可以很快的實現。
<!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隱藏測試</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的內容</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轉換開關實現
$("#contents").toggle()
個視頻來說一個有時候前端面試會問到的CSS的面試題，就是讓元素隱藏的這幾種方式，它們具體的用法和區別。具體去用我相信大家都用過，但是要把這個題回答的很好，把它們之間的區別捋清，不妨來說一下。
這里寫了兩個div，一個紅色、一個藍色，現在把紅色這個給它隱藏掉，上面寫的3種方法都可以把它隱藏掉。區別在哪里？
·先來試一下opacity，紅色的div確實不見了。
·再來試一下第二種visibility，刷新一下，紅色的div也是看不見了，好像和第一種方法沒什么區別。
·最后來試一下display，這種方法，紅色的div不單止不見了，連藍色的div它的位置也發生改變了。
先來說一下前面兩種，因為前面兩種方式，它們表現出來的形式實在太像了。現在用的是opacity，其實是改變了元素的透明度，也就是讓它完全透明了，所以才看不到它。但實際上它還是存在的，還是在這里的，只是看不到而已。所以這個方式，它是需要對元素所占的空間的給它排列出來，也就是它還是占的這個空間的。
其次不光是把它所占的空間排列出來，瀏覽器還需要對元素進行渲染，只不過是把它渲染成透明的，它還是存在的，所以是可以對它進行交互操作的，這一點等一下可以通過js去證明。
接著就是把visibility設置成hidden，這一個的排列方式和剛才設置透明度的是一樣的，但是它們有什么區別？這個看得出來，還是需要對它所占的空間進行排列的，它還是占著那個位置的，但是它也僅僅是占著那個空間而已。瀏覽器已經不對元素進行渲染了，所以空間給你保留，但是元素不存在，就沒辦法進行交互了。
最后就是display為none，很明顯藍色的div它的位置已經改變了，它占據了原本紅色div的位置，也就是紅色div原本的那個位置空間已經沒有了。其實這種方式，已經不是單純的把元素給隱藏了，已經是把元素的核模型給修改了，直接就把這個元素給干沒了，所以它是既不排列也不渲染。
如果是作為一個面試題來回答，最好還回答到一點，在這三個里面來比較，opacity透明度的這種方式它是最消耗性能的，因為不單止要幫你把位置空出來，還要完完全全的把你給渲染出來，只不過是渲染成透明的，所以它是這三個里面最消耗性能的。
visibility它就是沒那么消耗性能，因為這個只是給它保留個位置，保留個空間就可以了，不用對它進行渲染，所以它就沒那么消耗性能，display的方式就是完全不消耗性能了。
最后再來看一下用opacity這個元素是不是真的還存在，還可以交互，然后用visibility就已經不可以交互了，這里再把它改成opacity，來寫一下js，這里很簡單，就給它添加一個點擊事件，因為這個元素它還存在，肯定就可以點得到它。
把鼠標移到這個位置，看一下這個元素還存不存在，還可不可以點擊得到它，點擊一下，發現沒有，可以彈出這個OK，證明這個元素它還是存在的，只不過看不到它而已。再把前面給它改一下，改成visibility的方式，再來點這個位置，現在無論我怎么點它都沒有反應了，因為這個元素它壓根就不存在了，只是空著這個位置在這里而已。
這個視頻就到這里，感謝大家的收看。
][1]
jQuery本身沒有這樣一個事件，要實現這個效果，我們首先要先了解javascript中的事件冒泡。
冒泡定義：當一個元素上的事件被觸發的時候，比如說鼠標點擊了一個按鈕，同樣的事件將會在那個元素的所有祖先元素中被觸發。這一過程被稱為事件冒泡；這個事件從原始元素開始一直冒泡到DOM樹的最上層。（摘自網絡）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Click
上述代碼運行后，點擊鏈接，以此會出現link, inner, outer, document,轉向百度。
也就是說我們點擊鏈接后 click事件一直冒泡傳遞在最外層body。
1. 阻止事件冒泡, 并不阻止事件行為：event.stopPropagation();
$(function() {
$("#link").click(function(event) {
event.stopPropagation();
});});上述代碼運行后，點擊鏈接，按順序會出現link, 轉向百度。
2. 阻止事件行為，并阻止事件冒泡 ：event.preventDefault();
$(function() {
$("#link").click(function(event) {
event.preventDefault();
});});上述代碼運行后，點擊鏈接，按順序會出現link, inner, outer, document, 但是不轉向百度。
3. 阻止事件冒泡, 也阻止事件行為：return false;
$(function() {
$("#link").click(function(event) {
return false;
});});上述代碼運行后，點擊鏈接，只會出現link。
因此我們可以看出事件冒泡不一定是個壞的東西，有些情況會讓不同層次捕獲不同的事件！
所以鼠標點擊Div區域外隱藏Div正需要用到事件冒泡。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
