wake-up-neo.net

Verstecken Sie ein Div, wenn Sie außerhalb davon geklickt haben

Diese Frage wurde mehrmals gestellt, jedoch scheint keine der Antworten für mich zu funktionieren.

Die CSS des Div ist wie folgt:

#info{
  display: none;
  position: fixed;
  z-index: 500;
  height: 50%;
  width: 60%;
  overflow: auto;
  background: rgba(187, 187, 187, .8);
}

Ich habe versucht, folgenden Code zu verwenden:

$("#info").click(function(e){
  e.stopPropagation();
});

$(document).click(function(){
  $("#info").hide();
});

sowie diesen Code:

$(document).mouseup(function (e){
    var container = $("#info");

    if (container.has(e.target).length === 0) {
        container.hide();
    }
});

Immer wenn ich auf das div klicke, verschwindet es auch, kein Hinweis warum, aber es tut es.
... Was sonst noch funktionieren könnte? 

jqueryhtmlonclickhide
17
Gooey

Da Ihr Ziel id=info hat, können Sie Folgendes versuchen:

$(document).click(function(e) {

  // check that your clicked
  // element has no id=info

  if( e.target.id != 'info') {
    $("#info").hide();
  }
});

Sie können auch versuchen:

$(document).click(function() {

  if( this.id != 'info') {
    $("#info").hide();
  }

});

Nach kommentar

$(document).click(function(e) {

    // check that your clicked
    // element has no id=info
    // and is not child of info
    if (e.target.id != 'info' && !$('#info').find(e.target).length) {
        $("#info").hide();
    }
});
31
thecodeparadox

Hängen Sie einen onclick-Ereignishandler an das document-Objekt an:

$(document).click(function(e) {   
    if(e.target.id != 'info') {
        $("#info").hide();   
    } 
});

Demo: http://jsfiddle.net/aUjRG/

Hier ist eine Lösung in reinem JavaScript, die Ihnen hilft zu verstehen, was passiert:

function hideInfo(){
    if(window.event.srcElement.id != 'info'){
        document.getElementById('info').style.display = 'none';
    }
}

document.onclick = hideInfo;

Demo: http://jsfiddle.net/mmzc8/

Bei beiden Lösungen wird geprüft, ob sich der Ort, auf den der Benutzer geklickt hat, auf dem Element mit der ID info befindet. Angenommen, der Benutzer hat nicht auf das Element info geklickt, und das Element info wird ausgeblendet.

4
RobB

Versuchen Sie diesen Code, das ist das Beste für mich.

jQuery('.button_show_container').click(function(e) {
    jQuery('.container').slideToggle('fast'); 
    e.stopPropagation();
});

jQuery(document).click(function() {
        jQuery('.container').slideUp('fast');
});
3
Ken Avila

Um sicherzustellen, dass Sie eine Lösung haben, die auch auf iPads funktioniert, müssen Sie stattdessen den folgenden Funktionstrigger verwenden:

$(document).on("mousedown touchstart",function(e){
  var $info = $('#info');
  if (!$info.is(e.target) && $info.has(e.target).length === 0) {
    $info.hide();
  }
});

Wenn Sie den Mouseup abdecken möchten, fügen Sie "touchend" hinzu:

$(document).on("mouseup touchend",function(e){
  ...
});
3
Andy Lorenz

Sie können nur eine Klasse hinzufügen, um zu prüfen, ob das betreffende div oder ein Element innerhalb dieses div-Elements angeklickt wurde oder nicht. 

$(document).click(function(e){            
    if ( !$(e.target).hasClass("[class name for check]") &&
         $("[element class or id]").css("display")=="block" ) {
            //...code if clicked out side div
    }
});
0
Ahmad.Iftikhar