我真是實在想不到這個標(biāo)題應(yīng)該怎么寫，如果你一下子并不能理解。你可以看看我這個網(wǎng)站的搜索框。
個人網(wǎng)站
搜索框在網(wǎng)站的右側(cè)，一開始搜索框是這樣的。
初始搜索框樣式
在點擊搜索圖標(biāo)的時候，搜索框會變成這樣。
點擊之后
在之后，如果你需要這個搜索框變成原來的樣式，只顯示一個個圖標(biāo)。你不需要再點擊這個搜索的圖標(biāo)，只要點擊這個網(wǎng)站里除了這個圖標(biāo)和輸入框的其它內(nèi)容就可以。
要實現(xiàn)這個功能，我們就需要用到j(luò)s的點擊冒泡機(jī)制。這個機(jī)制等下我再來介紹，先來看看代碼。
<div class="searchbox"> <div class="page-header-search"></div> <div class="page-header-search-input" contenteditable="true"></div> </div>這是html代碼，具體的樣式我就不貼出來了，想看樣式可以在上面那個網(wǎng)站里通過審查元素來看。最外面那個div就是整體的一個容器，里面第一個div是搜索框的圖標(biāo)，第二個div是后面可以輸入框。
searchclick:function () { $(".page-header-search").click(function(){ $(".searchbox").css("left","0px"); $(document).click(function(){ $(".searchbox").css("left","210px"); }); event.stopPropagation(); }); $(".page-header-search-input").click(function(){ event.stopPropagation(); }); }這是js代碼，其實就是兩個點擊事件而已。我們先設(shè)置搜索圖標(biāo)的點擊事件，對于css樣式的修改我就不解釋了。$(document).click(function(){}就是對document設(shè)置一個點擊事件，這個事件里的就是搜索框的隱藏函數(shù)。
下面重點解釋一下event.stopPropagation()和點擊事件的冒泡機(jī)制。
像我們平時用的js添加點擊事件ele.onclick=function(){}都是采用的事件冒泡方式。在點擊之后，會從一層一層往上冒泡。冒泡順序基本為div -> body -> html -> document（個別瀏覽器可能還會有其他內(nèi)容）。event.stopPropagation()這個函數(shù)的作用就是停止當(dāng)前的冒泡事件。
大概介紹完了，我們再來理理這個函數(shù)的運(yùn)行原理。我們在點擊圖標(biāo)的時候觸發(fā)這個點擊事件，然后添加了一個document的點擊事件，讓我們可以點擊其它內(nèi)容來隱藏搜索框。但是我們在點擊搜索框之后，因為點擊事件是冒泡的，它最后會冒泡到document這一層會觸發(fā)這個隱藏的函數(shù)。所以我們需要停止冒泡事件。
$(".page-header-search-input").click(function(){ });這個點擊函數(shù)是防止我們在點擊輸入框的時候產(chǎn)生的點擊事件冒泡上去從而觸發(fā)搜索框隱藏的事件。
