Jquery - Ajouter une classe sur le clic du bouton / suppression de classe sur cliquez de corps

J'ai un div que je veux montrer, quand on clique sur un bouton, et puis si n'importe où sur la page (y compris le bouton d'origine), sauf que caché div est cliqué puis je veux la div pour se cacher à nouveau.

Je pense que je suis assez proche, ne peuvent tout simplement pas l'obtenir. C'est ce que j'ai jusqu'à présent (comme un exemple de base:

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

Ici est un JSfiddle l'aide de ce code: http://jsfiddle.net/vgf6g/1/

J'ai essayé sans l'instruction si au premier abord, mais qui bien sûr a causé le html cliquez pour remplacer le bouton de cliquer provoquant la div à ne jamais se montrer.

Merci!

OriginalL'auteur BlueCaret | 2013-10-17

  1. 5
    //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/

    Merci à tous! Suis allé avec votre réponse car elle m'a permis d'avoir une autre div à l'intérieur de la toggletag et toujours être en mesure de cliquer à l'intérieur de la div, ce qui l'empêche de se fermer.
    Merci c'est de l'excellent travail 🙂

    OriginalL'auteur LeGEC

  2. 3

    Je pense que cela ne ce que vous voulez:

    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. Si vous cliquez sur le bouton en premier, il montre de la div. Si vous cliquez à nouveau, il se cache.

    2. Si vous cliquez sur le div caché, qui est maintenant visible qu'il ne se cache pas.

    3. Si vous cliquez n'importe où ailleurs, il se cache.

    OriginalL'auteur sberry

  3. 2

    Cela fonctionne:

    $(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');
    }
});

    Démo ici

    Pourquoi le downvote??
    Cela fonctionne exactement comme prévu. J'ai supprimé ma réponse.

    OriginalL'auteur Sergio

  4. 1

    Comme

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

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

    Démo: Violon

    OriginalL'auteur Arun P Johny