Wie erreicht man diesen einfachen Effekt in jQuery?

Question

Ich versuche einen Link zu erstellen, der, wenn er angeklickt wird, einige Informationen in einem div anzeigt, das zuvor ausgeblendet wurde. Wenn der Link erneut geklickt wird, wird das div ausgeblendet. Also in anderen Worten eine grundlegende Toggle-Funktionalität.

Bevor auf den Link geklickt wird, lautet der Ankertext "Details anzeigen". Sobald auf den Ankertext geklickt wird, ändert sich der Text in "Details ausblenden". Das Problem ist, wenn es erneut angeklickt wird, ändert es sich nicht zurück zu "Show Details", es bleibt bei "Hide Details". Wie kann ich das erreichen?

Hier ist mein Code:

<style type="text/css"> 
    .hiddenDiv { border: 2px solid #ccc; width: 500px; height: 300px; } 
</style> 

<script type="text/javascript"> 
    $(document).ready(function() { 

     $('.hiddenDiv').hide(); 
     $('.button').click(function() { 

      $('.button').html('Hide Details'); 
      $('.hiddenDiv').toggle(); 

     }); 

    }); 
</script> 

<a href="#" class="button">Show Details</a> 
<div class="hiddenDiv"> 
    <h2>Lacoste Shirt</h2> 
    <p>This is a shirt with a small alligator logo sewen on the chest area.</p> 

</div> 

Answer 1

Statt .click() gibt es eine .toggle() Event-Handler zu ändern:

$('.button').toggle(function() { 
    // First click, show 
    $(this).html('Hide Details'); 
    $('.hiddenDiv').show(); 
}, function() { 
    // Second click, hide 
    $(this).html('Show Details'); 
    $('.hiddenDiv').hide(); 
}); 

Alternativ Ihre `Klasse‚.hiddenDiv verwenden - sowohl um anzuzeigen/zu verstecken und als eine Flagge zu fungieren ...

<style type="text/css"> 
    /* Note the display: none */ 
    .hiddenDiv { display: none; border: 2px solid #ccc; width: 500px; height: 300px; } 
</style> 

<script type="text/javascript"> 
    $(document).ready(function() { 

     // Don't need this anymore: $('.hiddenDiv').hide(); 
     $('.button').click(function() { 
      var toggleMe = $(this).next(); 
      // Don't need to show/hide anymore 
      toggleMe.toggleClass('hiddenDiv'); 
      $(this).html(toggleMe.hasClass('hiddenDiv') ? 
       'Show Details' : 'Hide Details'); 
     }); 

    }); 
</script> 

Answer 2

ersetzen

$('.hiddenDiv').toggle(); 
$('.button').html('Hide Details'); 

mit

$('.hiddenDiv').toggle(); 
$('.button').html($('.hiddenDiv').is(':visible') ? 'Hide Details' : 'Show Details'); 

Edit: Im Fall, dass Sie mehrere Taste/hiddenDiv Combos auf der Seite (wie ich Verdächtige), müssen Sie dies stattdessen tun:

$(document).ready(function() { 

    $('.hiddenDiv').hide(); 

    $('.button').click(function() { 
     var $button = $(this); 
     var $div = $button.next('.hiddenDiv'); 

     $div.toggle(); 
     $button.html($div.is(':visible') ? 'Hide Details' : 'Show Details'); 
    }); 

}); 

Answer 3

Sie können von $('.hiddenDiv').hide(); loszuwerden von Ihrem Stil

.hiddenDiv { border: 2px solid #ccc; width: 500px; height: 300px; display:none; }