Toggle tonen/verbergen bij klik met jQuery

Ik heb een div-element, dus als ik erop klik, schuift en wordt een andere divdie standaard verborgen is weergegeven, hier is de code voor de animatie zelf :

$('#myelement').click(function(){
     $('#another-element').show("slide", { direction: "right" }, 1000);
});

Hoe kan ik dat zo maken dat als ik nog een keer op #myelementklik (wanneer het element al wordt getoond), het verbergtde #another-elementals volgt:

$('#another-element').hide("slide", { direction: "right" }, 1000);?

Dus in principe zou het precies moeten werken als een slideToggle, maar met de show/hide-functies. Is dat mogelijk?


Antwoord 1, autoriteit 100%

De toggle-event is verouderd in versie 1.8 en verwijderd in versie 1.9

Probeer dit…

$('#myelement').toggle(
   function () {
      $('#another-element').show("slide", {
          direction: "right"
      }, 1000);
   },
   function () {
      $('#another-element').hide("slide", {
          direction: "right"
      }, 1000);
});

Opmerking:deze methodehandtekening is verouderd in jQuery 1.8 en verwijderd in jQuery 1.9. jQuery biedt ook een animatiemethode genaamd
.toggle() waarmee de zichtbaarheid van elementen wordt omgeschakeld. Of de
animatie of de gebeurtenismethode wordt geactiveerd, hangt af van de set argumenten
doorgegeven, jQuery-documenten.

De methode .toggle() is voor het gemak bedoeld. Het is relatief
eenvoudig om hetzelfde gedrag met de hand te implementeren, en dit kan
noodzakelijk zijn als de in .toggle() ingebouwde aannames beperkend blijken te zijn.
Het is bijvoorbeeld niet gegarandeerd dat .toggle() correct werkt als het wordt toegepast
twee keer naar hetzelfde element. Omdat .toggle() intern een klik gebruikt
handler om zijn werk te doen, moeten we de klik opheffen om een gedrag te verwijderen
gekoppeld met .toggle(), zodat andere klik-handlers kunnen worden gevangen in de
kruisvuur. De implementatie roept ook .preventDefault() aan op de
evenement, dus links worden niet gevolgd en er wordt niet op knoppen geklikt
als .toggle() is aangeroepen voor het element, jQuery-documenten

Je schakelt tussen zichtbaarheid met tonen en verbergen met klikken. Je kunt een voorwaarde op zichtbaarheid zetten als het element zichtbaar is, en anders verbergen. Let op: je hebt jQuery-gebruikersinterface nodig om toevoegingseffecten te gebruiken met toon/verberg-achtige richting.

Live-demo

$( "#myelement" ).click(function() {     
    if($('#another-element:visible').length)
        $('#another-element').hide("slide", { direction: "right" }, 1000);
    else
        $('#another-element').show("slide", { direction: "right" }, 1000);        
});

Of gebruik gewoon toggle in plaats van klikken. Door toggle te gebruiken, hebt u geen voorwaarde (als-anders) verklaring nodig. zoals voorgesteld door T.J.Crowder.

Live-demo

$( "#myelement" ).click(function() {     
   $('#another-element').toggle("slide", { direction: "right" }, 1000);
});

Antwoord 2, autoriteit 50%

Maak gebruik van de jQuery-schakelfunctie die de taak voor u doet

.toggle()– Toon of verberg de overeenkomende elementen.

$('#myelement').click(function(){
      $('#another-element').toggle('slow');
  });

Antwoord 3, autoriteit 5%

dit zal voor jou werken

  $("#button-name").click(function(){
        $('#toggle-id').slideToggle('slow');
    });

Antwoord 4

Je kunt deze code gebruiken om je element te wisselen
var ele = jQuery(“yourelementid”);
ele.slideToggle(‘slow’);

dit zal voor jou werken 🙂


Antwoord 5

U kunt de functie .toggle()gebruiken in plaats van .click()….


Antwoord 6

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js</script>        <script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").toggle();
  });
});
</script>
</head>
<body>
<p>Welcome !!!</p>
<button>Toggle between hide() and show()</button>
</body>
</html>

Antwoord 7

$(document).ready( function(){
  $("button").click(function(){
    $("p").toggle(1000,'linear');
  });
});

Live-demo

Other episodes