Jquery-добавить класс по щелчку кнопки / Удалить класс по щелчку тела

У меня есть div, который я хочу показать, когда нажата кнопка, а затем, если где-либо еще на странице (включая исходную кнопку), за исключением этого скрытого div, я хочу, чтобы div снова скрылся.

Я думаю, что я довольно близко, просто не могу получить это право. Это то, что у меня есть до сих пор (в качестве основного примера:

$(".clickme").click(function () {
    $(".toggletag").addClass('open');
});
if ( $('.toggletag').hasClass('open') ) {
    $("html").click(function () {
        $(".toggletag").removeClass('open');
    });
}

вот JSfiddle, использующий этот код:http://jsfiddle.net/vgf6g/1/

сначала я пытался без оператора if но это, конечно, вызвало html-щелчок, чтобы переопределить щелчок кнопки, заставляющий div никогда не показывать.

спасибо!

7
hide jquery show

4 ответов

// flag : says "remove class when click reaches background"
var removeClass = true;

// when clicking the button : toggle the class, tell the background to leave it as is
$(".clickme").click(function () {
    $(".toggletag").toggleClass('open');
    removeClass = false;
});

// when clicking the div : never remove the class
$(".toggletag").click(function() {
    removeClass = false;
});

// when click event reaches "html" : remove class if needed, and reset flag
$("html").click(function () {
    if (removeClass) {
        $(".toggletag").removeClass('open');
    }
    removeClass = true;
});

http://jsfiddle.net/vgf6g/3/

5

Я думаю, что это делает то, что вы хотите:

http://jsfiddle.net/ch94M/2/

$(".clickme").click(function (e) {
    $('.toggletag').toggleClass('open');
    e.stopPropagation()
});

$(document).click(function (e) {
    if (! $(e.target).hasClass('toggletag')) $(".toggletag").removeClass('open');
});

  1. Если вы сначала нажмете кнопку, она покажет div. Если вы нажмете на нее еще раз, она скроется.

  2. Если вы нажмете скрытый div, который теперь можно просмотреть, он не скрывается.

  3. Если вы нажмете где-нибудь еще, он скроется.

3

это работает:

$(document).click(function (e) {
    $el = $(e.target);
    if ($el.hasClass('toggletag')) {return false;}
    else if($el.hasClass('clickme')) {
        $(".toggletag").toggleClass('open');

    } else {
        $(".toggletag").removeClass('open');
    }
});

демо здесь

2

Как

$(".clickme").click(function (e) {
    e.stopPropagation();
    $(".toggletag").toggleClass('open');
});

$(document).click(function (e) {
    if(!$(e.target).closest('.toggletag').length){
        $(".toggletag").removeClass('open');
    }
});

демо: Скрипка

1