Anzeigen und Verbergen in jquery

Question

Wie kann ich ein div verbergen und anzeigen (und die Breite eines anderen div ändern) mit dem gleichen Link, zum Beispiel kann ich A div zeigen und seine width ändern. Wie kann ich es so machen, dass, wenn der Benutzer erneut klickt, die Breite zurück zu 600px und das rechte div ist ausgeblendet.

$("a").click(function(event){ 
     $('#main-content').width(800); 
     $('#right').show('slow').slideDown('slow'); 
     event.preventDefault(); 
     }); 

EDIT: von allen Ihren Antworten, ich habe dies getan:

$(document).ready(function(){ 
    $('#right').hide(); 
    $('#main-content').width(600); 

    $('#show-stats').toggle(function() { 
     $('#main-content').width(800); 
     $(this).text($(this).text() == 'Show' ? 'Hide' : 'Show'); 
     $('#right').show('slow').slideDown('slow').fadeIn('slow'); 
     event.preventDefault(); 

    }, function() { 
     $('#main-content').width(600); 
     $(this).text($(this).text() == 'Hide' ? 'Show' : 'Hide'); 
     $('#right').hide('slow').slideUp('slow').fadeOut('slow'); // change the text 
     event.preventDefault(); 
}); 



}); 

Wird das Internet brechen? Gibt es einen eleganteren Weg oder ist das in Ordnung?

Answer 1

Sie müssen die toggle pseudo-event handler verwenden. Dies akzeptiert mehrere Funktionsdefinitionen als Argumente und ruft diese wiederum auf. Bei zwei Argumenten ruft der erste Aufruf die erste Funktion, der zweite Aufruf die zweite Funktion, der dritte Aufruf die erste Funktion usw. auf.

$('a').toggle(function(event){ 
    $('#main-content').width(800); 
    $('#right').show('slow').slideDown('slow'); 
    event.preventDefault(); 
}, function(event) { 
    $('#main-content').width(600); 
    $('#right').slideUp('slow').hide('slow'); 
    event.preventDefault(); 
}); 

Answer 2

können Sie .toggle()

Ein kleines Beispiel verwenden:

$("a").toggle(
    function() { 
     $('#main-content').width(800); 
     $('#right').show('slow').slidedown('slow'); 
    }, 
    function() { 
     $('#main-content').width(600); 
     $('#right').hide(); 
    } 
);