jQuery .not（）問題

Question

我要做的前提是使用jQuery啟動CSS轉換以打開和關閉搜索框。

用戶單擊放大鏡圖標，框打開，用戶單擊頁面上的任意位置，但搜索表單框關閉。

要關閉，請使用以下命令：

$('body *').not('#header-search, #header-field, #header-submit').click(function () {

以及在這里找到的答案的不同變化： jQuery-選擇除單個元素及其子元素以外的所有內容？ 沒有成功。

單擊input＃header字段將始終關閉該框。

筆在這里：

http://codepen.io/anon/pen/RNbmwr

謝謝閱讀。

Answer 1

您的代碼非常激進（ 它將應用於所有元素，因此.not()中的內部元素將觸發它 ）。

最好將框的關閉委托給body （ 因為單擊事件會冒泡 ），並手動取消禁止列表下發生的任何事件。

$('body').on('click', function(){
   // code for closing box here
});

$('#header-search, #header-field, #header-submit').on('click', function(){
   return false; // stop bubbling of event
});

---

並且由於在您的示例中， #header-field和#header-submit是header-search后代，因此您只需要取消對該header-search的冒泡

$('#header-search').on('click', function(){
   return false; // stop bubbling of event
});

演示在http://codepen.io/gpetrioli/pen/XJrwXO

Answer 2

嘗試使用jQuery toggle（）函數：

<script>
$( "button" ).click(function() {
  $( "p" ).toggle( "slow" );
});
</script>

將放大鏡的ID替換為“按鈕”，然后更改段落-$（“ p”）-您要顯示/隱藏的搜索控件。 切換更改指示的ID或類的可見性。 如果最初是隱藏的，則單擊鼠標將使其可見； 如果最初可見，則單擊鼠標即可將其隱藏。

最后，如果您不希望過渡“緩慢”移動，請更改過渡的速度

有關toggle（）的更完整說明，請參見http://api.jquery.com/toggle/

Answer 3

頁面上有很多元素。 其中一些可能包含您命名的元素，也可能包含在您命名的元素中。 因此他們仍然會觸發事件。

而是綁定一個事件處理程序：

$("body").click(function(evt) {

並檢查是否單擊了以下元素之一：

    if( $(evt.target).parents("#header-search").length > 0) {

如果是這樣，則取消處理程序：

        return true;
    }

否則，請執行實際事件：

    doSomething();
});