Jquery - Klasse Hinzufügen klicken Sie auf die Taste / Entfernen-Klasse auf klicken des Körpers

Ich habe ein div, dass ich zeigen will, wenn ein button angeklickt wird, und dann, wenn überall sonst auf der Seite (einschließlich der original-Taste), außer, dass versteckte div geklickt wird, soll ich dann das div wieder ausblenden.

Ich denke ich bin ziemlich nah, einfach nicht bekommen kann es richtig. Dies ist, was ich bisher (als einfaches Beispiel:

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

Hier ein JSfiddle mit diesem code: http://jsfiddle.net/vgf6g/1/

Habe ich versucht, ohne die if-Anweisung auf den ersten, aber natürlich verursacht der html klicken Sie auf überschreiben, den button klicken, wodurch das div nie zeigen.

Dank!

InformationsquelleAutor 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/

    • Vielen Dank an alle! Ging mit Ihrer Antwort, wie es mir erlaubt, ein weiteres div innerhalb des toggletag und noch in der Lage sein, um auf das innere div die verhindert, dass es geschlossen wird.
    • Vielen Dank es funktioniert toll 🙂
    InformationsquelleAutor LeGEC
  2. 3

    Ich denke das tut, was Sie wollen:

    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. Wenn Sie klicken Sie auf die Schaltfläche erste, es zeigt die div. Wenn Sie erneut klicken, wird es ausgeblendet.

    2. Wenn Sie auf die versteckten div, dass ist jetzt sichtbar, es verbirgt sich nicht.

    3. Wenn Sie klicken Sie irgendwo es versteckt.

    InformationsquelleAutor sberry
  3. 2

    Dies funktioniert:

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

    Demo hier

    • Wieso der downvote??
    • Dies funktioniert genau wie erwartet. Ich gelöscht meine Antwort.
    InformationsquelleAutor Sergio
  4. 1

    Wie

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

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

    Demo: Fiddle

    InformationsquelleAutor Arun P Johny
Schreibe einen Kommentar