Verwenden von .Toggle() zum Anzeigen und Ausblenden eines Div bei Klick funktioniert nicht

Question

Ich versuche eine jQuery-Funktion zu schreiben, um ein div auf einen Klick zu verbergen/anzuzeigen.

Ich habe einen <a> Tag mit der Klasse my-button. Ein div mit der Klasse my-div wird beim Laden der Seite zunächst mit ausgeblendet. Wenn ein Benutzer auf my-button klickt und my-div ausgeblendet ist, möchte ich my-div anzeigen. Wenn my-div sichtbar ist, möchte ich es ausblenden können, wenn ein Benutzer auf eine andere Stelle als my-div klickt. Dazu gehört auch ein Klick auf my-button.

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

Ich versuchte, die .toggle() Funktion ohne Erfolg zu verwenden; my-div wird nach einem Klick auf my-button nicht angezeigt. Wenn ich .toggle() durch .show() ersetze, wird my-div angezeigt und ausgeblendet, wenn ich irgendwo auf der Seite aber nicht klicke, wenn ich wieder auf my-button klicke.

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

Was wäre der beste Weg, um das zu erreichen, was ich will.

Answer 1

Ist das wonach Sie suchen?

$(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

müssen Sie richtig das Ereignis an die Taste angebracht und toggle() verwenden zu verstecken oder zeigen, die 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

Zuerst würde ich zeigen versuchen/versteckt nur auf den Knopf klicken Probieren Sie es aus. Zunächst einmal geben Sie Ihre Schaltfläche, um eine id = „show_hide“ und Ihre div eine id = „my_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'; 
     } 
    }); 

Sie können die IDs ändern, was auch immer Sie wollen, aber ich schlage vor, dies, falls Sie andere Elemente geben wollen die gleiche Klasse, aber ohne diese Funktionalität

Alternativ könnte man hinzufügen, diese verschwinden zu machen, wenn irgendwo anders als die Schaltfläche klicken, sollten Sie die folgende Funktion

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

    }); 
}); 

verwenden können