如何在單擊時以及用戶單擊時使用jquery隱藏元素？

Question

碼：

<script type="text/javascript">

$(document).ready(function() {
    $('.show_or_hide_link_clicker').click(function() {
        $(".the_box_to_show").fadeIn(400);
    });
});
</script>

單擊show_or_hide_link_clicker時，將顯示the_box_to_show。 如果再次單擊show_or_hide_link_clicker或用戶單擊離開，如何隱藏它？

更新：這就是我現在正在做的： http : //jsfiddle.net/nFbnr/

問題：如何刪除顯示div的雙擊要求？

Answer 1

單擊任意位置時，檢查元素是否在傳播路徑上。 如果不是，則用戶在其外部單擊，以便將其隱藏。

$(document).click(function(e) {
    if ($(e.target).closest(".the_box_to_show").size() === 0) {
        $(".the_box_to_show").hide();
    }
});

http://jsfiddle.net/vdHAu/

Answer 2

您正在尋找jQuery Toggle 。

$('.the_box_to_show').toggle();

Answer 3

$(document).click(function(e) {
    if (!$(e.target).is(".the_box_to_show")) {
        $(".the_box_to_show").hide();
    }
});
$('.show_or_hide_link_clicker').click(function() {
    $(this).hide();
    $(".the_box_to_show").fadeIn(400);
});

Answer 4

沒有委托事件到文檔級別的另一種方法：

您必須將屬性tabindex設置為框和CSS輪廓樣式

http://jsfiddle.net/GV56b/

$(document).ready(function () {
    $('.show_or_hide_link_clicker').click(function () {
        $(this).hide();
        $(".the_box_to_show").fadeIn(400, function () {
            this.focus()
        });
    });
    $(".the_box_to_show").on('blur',function(){
        $(this).hide();
        $('.show_or_hide_link_clicker').fadeIn(400);
    });
});

Answer 5

看一下這個

$('.show_or_hide_link_clicker').click(function() {
    $(this).hide();
    $(this).addClass('active);
    $(".the_box_to_show").fadeIn(400);
});

$(document).on('click', 'html', function(){
  $(".the_box_to_show").fadeOut(400);
 });




$(document).on('click', '.active', function(e){
  e.stopPropagation();
});