Toggle - скрыть элемент, когда клик за пределами div

Я использую jquery slidetoggle, хочу узнать, как скрыть класс showup, когда вы нажимаете где-либо вне DIV. спасибо!

Online SAMPLE: http://jsfiddle.net/evGd6/

<div class="click">click me</div>
<div class="showup">something I want to show</div>

$(document).ready(function(){
    $('.click').click(function(){
        $(".showup").slideToggle("fast");
    });
});

.showup {
    width: 100px;
    height: 100px; 
    background: red; 
    display:none;
}
.click {
    cursor: pointer;
}

Ответ 1

Остановить распространение события из области .showup:

$(document).on("click", function () {
    $(".showup").hide();
});

Затем запретите эти клики на .showup от пузырьков до document:

$(".showup").on("click", function (event) {
    event.stopPropagation();
});

Любое событие click, достигающее document, приведет к скрытию элемента .showup. Любые события щелчка, начинающиеся с .showup, будут препятствовать дальнейшему продолжению дерева DOM и, таким образом, никогда не достигнут document.

Вам также нужно будет остановить любые клики на вашей кнопке, перемещаясь до document:

$(".click").on("click", function (event) {
    event.stopPropagation();
    $(".showup").slideToggle("fast");
});

В противном случае это событие щелчка начнется до document и немедленно приведет к скрытию .showup.

Демо: http://jsfiddle.net/evGd6/2/

Ответ 2

Если вы по-прежнему хотите записывать щелчки на панели .showup (допустим, вы хотите, чтобы она была более простой, чем простая информативная панель), вызов event.stopPropagation() при ее нажатии сделает эту панель неприкасаемой/бесполезной. event.cancelBubble = true этого используйте event.cancelBubble = true и событие будет происходить в .showup.

$('.click').click(function(){
    $(".showup").toggle();
});

$(".showup").on("click", function (/*nothing here*/) {
    event.cancelBubble = true
});

$(document).on("click", function () {
    $(".showup").hide();
});