jQuery attiva/disattiva CSS?

Question

Voglio passare da CSS in modo che quando un utente fa clic sul pulsante (#user_button) mostra il menu (#user_options) e modifica il CSS e quando l'utente fa clic nuovamente, torna alla normalità. Finora questo è tutto ciò che ho:

$('#user_button').click(function() { 
    $('#user_options').toggle(); 
    $("#user_button").css({  
     borderBottomLeftRadius: '0px', 
     borderBottomRightRadius: '0px' 
    }); 
    return false; 
}); 

Qualcuno può aiutare?

Answer 1

$('#user_button').toggle(function() { 
    $("#user_button").css({borderBottomLeftRadius: "0px"}); 
}, function() { 
    $("#user_button").css({borderBottomLeftRadius: "5px"}); 
}); 

utilizzando le classi in questo caso sarebbe meglio che l'impostazione del CSS direttamente, però, guardare ai metodi addClass e removeClass alecwh menzionati.

$('#user_button').toggle(function() { 
    $("#user_button").addClass("active"); 
}, function() { 
    $("#user_button").removeClass("active"); 
}); 

Answer 2

È possibile utilizzare i comandi .addClass e .removeClass di jQuery e creare due classi diverse per gli stati. Questo, per me, sarebbe il modo migliore per farlo.

Answer 3

L'opzione migliore sarebbe quella di impostare uno stile di classe in CSS come .showMenu e .hideMenu con i vari stili all'interno. Poi si può fare qualcosa di simile

$("#user_button").addClass("showMenu"); 

Answer 4

vorrei utilizzare la funzione toggleClass in jQuery e definire il CSS per la classe di esempio

/* start of css */ 
#user_button.active { 
    border-bottom-right-radius: 5px; 
    border-bottom-left-radius: 5px; 
    -webkit-border-bottom-right-radius: 5px; /* user-agent specific */ 
    -webkit-border-bottom-left-radius: 5px; 
    -moz-border-radius-bottomright: 5px; 
    -moz-border-radius-bottomleft: 5px; /* etc... */ 
} 
/* start of js */ 
$('#user_button').click(function() { 
    $('#user_options').toggle(); 
    $(this).toggleClass('active'); 
    return false; 
})