jquery klicken Sie auf ändern, Klasse

Ich studiere jquery, ich möchte eine effection als: der erste Klick, den regler nach unten, der div#ccc und ändern Sie das link-Klasse "aaa"; klicken Sie erneut, Schieberegler, bis das div#ccc und ändern Sie die Klasse link zurück zu 'bbb'. jetzt regler nach unten arbeiten kann, aber removeClass addClass nicht funktionieren. wie zu ändern, so dass zwei effection Arbeit perfekt? danke.

<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript">
jQuery(document).ready(function(){              
$("#click").click(function() {
    $("#ccc").slideDown('fast').show();
    $(this).removeClass('bbb').addClass('aaa');
});
$("#click").click(function() {
    $("#ccc").slideDown('fast').hide();
    $(this).removeClass('aaa').addClass('bbb');
});
});
</script>
<style>
#ccc{display:none;}
</style>
<div id="click" class="bbb">click</div>
<div id="ccc">hello world</div>

InformationsquelleAutor cj333 | 2011-05-19

  1. 4

    Müssen Sie eine einzelne toggle-event. Sie setzen das click-Ereignis zweimal, und das wird nicht funktionieren.

    jsfiddle

    InformationsquelleAutor Tim Hobbs

  2. 4

    Verwenden, Umschalten statt ein - /ausblenden und toggleClass anstelle von hinzufügen/entfernen, und verschmelzen zu einem einzigen click-Ereignis. So etwas (ungetestet und wohl nicht funktioniert):

    $("#click").click(function() {
    $("#ccc").toggle().animate();
    $(this).toggleClass('bbb aaa');
});
    $(this).toggleClass('bbb aaa'); wäre noch besser.
    In der Tat würde es - geändert!
    Schön & sauber Lösung. Dank

    InformationsquelleAutor SickHippie

  3. 1

    Du suchst die toggle event, scheint es.

    $(document).ready(function () {
    $('div#click').toggle(
        function () {
            $('div#ccc').slideDown('fast').show();
            $('div#click').removeClass('bbb').addClass('aaa');
        },
        function () {
            $('div#ccc').slideDown('fast').hide();
            $('div#click').removeClass('aaa').addClass('bbb');
        });
    });

    InformationsquelleAutor Andrew

Schreibe einen Kommentar