2013-07-25 133 views
1

這是我正在嘗試做的事情。 我已經創建了一個jsfiddle,所以你可以看看,讓我知道如何做我在找什麼。需要用jQuery點擊功能修改

$(document).ready(function() { 
    $('#trigger-button').click(function() { 
     $('#trigger-box').toggle(); 
    }); 
}); 

http://jsfiddle.net/s2FzE/

它儘可能代碼而言工作正常。 點擊按鈕會觸發一個框出現並消失。工作正常。

但我想要的是,如果有人點擊按鈕和框出現然後框可以通過2種方法消失。

  1. 按鈕或
  2. 單擊除盒(點擊頁面主體)的任何地方<再次點擊 - 這是我需要幫助。
+1

首先,擺脫傳遞給'click'的第二個參數/函數。這個不成立。之後,看看jQuery UI對話框。他們可能會做你想做的。還有很多類似的庫可以顯示模態對話窗口。 – ThiefMaster

+0

謝謝了。自從我使用切換以來,第二個參數沒有做任何事情。 :)但我仍然需要一個最簡單的方法來做第二部分。我不想用大型圖書館來實現這一點。 –

+0

也有小的。例如http://www.malsup.com/jquery/block/。但是,如果你不想要模態行爲,請參閱adeneo的答案。 – ThiefMaster

回答

1

請收聽文檔級別的點擊,並篩選出按鈕或盒子任何點擊:

$(document).ready(function() { 
    $('#trigger-button').click(function() { 
     $('#trigger-box').toggle(); 
    }); 
    $(document).on('click', function(e) { 
     if (!$(e.target).closest('#trigger-box, #trigger-button').length) 
      $('#trigger-box').hide(); 
    }); 
}); 

FIDDLE

+0

代替'e.target'檢查,您可以簡單地在對話框的最外層元素上添加一個單擊處理函數,並調用'e.stopPropagation()'來防止事件到達您添加到文檔本身的處理函數。這消除了分別檢查對話框內的每個項目的需要。 – ThiefMaster

+0

@ThiefMaster - 是的,但按鈕和框是兄弟姐妹,所以這意味着要麼停止在包含元素'#容器',這聽起來像一個元素,將包含更多的元素,並停止傳播的傳播這可能會導致問題,所以只檢查目標似乎更合適。 – adeneo

+0

嗯,你爲什麼想要在對話框中傳播一個點擊事件給外部世界? – ThiefMaster

2

這裏是我的方法:

你需要一個document事件偵聽器在用戶單擊任何地方時隱藏該框。但是事件監聽器是沒有必要的,當箱子被隱藏,所以 - 它可以在顯示框只加,如:

var box = $('#trigger-box'), 
    showBox = function (e) { 
     if (!box.is(':visible')) {      // only do that when box is hidden 
      e.stopPropagation();      // required to prevent document 
      box.show(); 
      $(document).on('click.showBox', hideBox); // event namescope for easy removal 
     } 
    }, 

然後 - 當盒子被隱藏 - 我們可以刪除此事件偵聽器,像這樣:

var hideBox = function (e) { 
    var target = $(e.target); 
    if (target.is(box) || target.closest(box).length) return; // don't close if clicked on box or on anything inside the box 
    $(document).off('click.showBox'); 
    box.hide(); 
} 

,然後 - 我們可以只添加事件偵聽器:

$('#trigger-button').on('click', showBox); 

DEMO

+0

我不明白,你有兩個upvotes,但你爲什麼要添加一個事件處理程序內的另一個事件處理程序,然後使用off(),對我來說,它根本不工作,單擊該框,它消失,並點擊兩次按鈕,它不會消失?也許我誤解了這個問題! – adeneo

+0

看起來很有趣,但點擊觸發按鈕正在調用顯示框事件,並且在再次點擊時不會隱藏框。是對的嗎。 –

+0

@Roberthue好,趕快,謝謝。現在已經糾正了。 – tborychowski