Masquer div en cliquant sur l'extérieur

J'ai cherché et la recherche n'est pas seulement google, mais aussi ici et encore trouver une solution qui fonctionne.

J'ai un div qui est caché par défaut, puis basculée en cliquant sur un lien. Je tiens également à cacher lorsque vous cliquez en dehors de la div. Simple, pensais-je, mais rien, j'ai essayé avait travaillé encore.

C'est le jquery:

<script type="text/javascript">
    function toggleDiv(divID) {
    $("#"+divID).fadeToggle(200);
    }
</script>

Et le lien qui permet de:

<a onclick="toggleDiv('myDiv');">Link</a>

Et puis la div:

<div id="myDiv">
stuff
</div>

Si quelqu'un a des conseils, je voudrais vraiment l'apprécier.

Puisque vous êtes à l'aide de jQuery, vous devrez également joindre vous cliquez sur gestionnaire d'événement à l'aide de jQuery installations: $(document).ready(function() { $("#linkId").cliquez sur(function() { // Faire quelque chose }));

OriginalL'auteur scferg | 2011-06-22

  1. 11

    Cela devrait faire l'affaire pour vous:

    var openDiv;

function toggleDiv(divID) {
    $("#" + divID).fadeToggle(200, function() {
        openDiv = $(this).is(':visible') ? divID : null;
    });
}

$(document).click(function(e) {
    if (!$(e.target).closest('#'+openDiv).length) {
        toggleDiv(openDiv);
    }
});

    Exemple →

    EDIT: travaille Maintenant pour tous les scénarios.

    Fonctionne très bien. Merci!
    En fait, il semble être un peu buggé quand on cherche à avoir le même comportement avec plusieurs divs.

    OriginalL'auteur mVChr

  2. 3

    Vous pouvez simplement ajouter un gestionnaire d'événements click sur body comme un clic n'importe où "bulle" de cet élément.

    $("body").click(function(){ $("#myDiv").fadeOut(200); });

    Vous pouvez également ajouter une classe sur basculé d'éléments dans votre code de démonstration de sorte que vous pouvez cibler ces plus précisément, vous voulez les cacher.

    function toggleDiv(divID) {
    $("#"+divID).fadeToggle(200).toggleClass("visible");
}

$("body").click(function(){
    $(".visible").fadeOut(200, function(){
        $(this).removeClass("visible");
    });
});

    Si vous ne voulez pas le visible div pour cacher lorsque vous cliquez dessus, vous aurez également besoin d'annuler clique sur ces éléments, peut-être à l'aide de jQuery live() méthode.

    $(".visible").live("click", function(e){ e.stopPropagation(); });
    Vous aurez à définir un indicateur pour savoir si le déclic a eu lieu w/je le div ou pas. À l'intérieur, ne se fanera pas. À l'extérieur, à la décoloration.

    OriginalL'auteur Marcel

  3. 0
    $(document).mouseup(function(e) {
                var container = $("#form1");

                if (container.has(e.target).length === 0) {
                    container.hide();
                    $('#signupSection').css('display', 'none');
                    $('#signupSection2').css('display', 'block');
                }
            });

    OriginalL'auteur Pankaj