L'utilisation de .toggle() pour afficher et masquer une div sur le clic ne fonctionne pas

Question

J'essaye d'écrire une fonction de jQuery pour cacher/montrer un div sur un clic. J'ai un tag <a> avec la classe my-button. Un div avec la classe my-div est initialement masqué avec display: none lorsque la page se charge. Quand un utilisateur clique sur my-button et my-div est caché, je veux montrer my-div. Lorsque my-div est visible, je veux être en mesure de le cacher lorsqu'un utilisateur clique n'importe où sur la page autre que sur my-div. Cela inclut également un clic sur my-button.

<a class="my-button">Click me!</a> 
<div class="my-div">Show Me or Hide Me!</div> 

J'ai essayé d'utiliser la fonction .toggle() sans succès; my-div ne s'affichera pas après un clic sur my-button. Si je remplace .toggle() par .show(), my-div montrera et cachera si je clique n'importe où sur la page mais pas si je clique encore sur my-button.

$(document).mouseup(function(e) { 
     var $container = $(".my-div"); 

     $(".my-button").click(function(){ 
      $container.toggle(); 
     }); 

     if (!$container.is(e.target) && $container.has(e.target).length === 0) { 
      $container.hide(); 
     } 
}); 

Quelle serait la meilleure façon de réaliser ce que je veux.

Answer 1

Est-ce ce que vous cherchez?

$(document).mouseup(function(e) { 
 
    var $container = $(".my-div"); 
 
    if (!$container.is(e.target) && !$(".my-button").is(e.target) && $container.has(e.target).length === 0) { 
 
    $container.hide(); 
 
    } 
 
}); 
 

 
$(".my-button").click(function() { 
 
    $(".my-div").toggle(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button class="my-button">Click me!</button> 
 
<div class="my-div">Show Me or Hide Me!</div>

Answer 2

Vous devez bien attaché l'événement au bouton et utiliser toggle() pour masquer ou afficher la div

$(document).ready(function(e) { 
 
    $(".my-button").click(function(e){ 
 
     $(".my-div").toggle(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<a class="my-button">Click me!</a> 
 
<div class="my-div">Show Me or Hide Me!</div>

Answer 3

D'abord, je voudrais essayer show/cacher juste sur le bouton cliquez Essayez-le. Tout d'abord donner votre bouton un id = « show_hide » et votre div un id = « mon_div »

$('#show_hide').click(function (e) { 
     var x = document.getElementById('my_div'); 
     if (x.style.display === 'none') { 
      x.style.display = 'block'; 
     } else { 
      x.style.display = 'none'; 
     } 
    }); 

Vous pouvez modifier les ID à ce que vous voulez, mais je suggère cela dans le cas où vous souhaitez donner d'autres éléments la même classe, mais sans cette fonctionnalité

vous pourriez aussi ajouter à la faire disparaître en cliquant nulle part ailleurs autre que le bouton que vous devriez être en mesure d'utiliser la fonction suivante

$(document).ready(function(){ 

    $(document).mousedown(function(e){ 
    var x = document.getElementById('my_div'); 
    if(e.button == 1) { 
     var isHovered = $('#my_div').is(":hover"); 
     if (!isHovered) { 
      x.style.display = 'none'; 
     } 
    } 

    }); 
});