jQuery przełącza CSS?

Question

Chcę przełączać się między CSS, więc gdy użytkownik kliknie przycisk (#user_button), pokazuje menu (#user_options) i zmienia CSS, a gdy użytkownik kliknie to ponownie, wraca do normy. Do tej pory to wszystko, co mam:

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

Czy ktoś może pomóc?

Answer 1

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

Korzystanie zajęcia w tym przypadku byłoby lepiej niż ustawienie css bezpośrednio choć spojrzeć na metodach addClass i removeClass alecwh wymienionych.

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

Answer 2

Możesz użyć komend jQuery: .addClass i .removeClass i utworzyć dwie różne klasy dla stanów. To byłby dla mnie najlepszy sposób na zrobienie tego.

Answer 3

Najlepszym rozwiązaniem byłoby ustawienie stylu klasy w CSS jak .showMenu i .hideMenu z różnych stylów wewnątrz. Następnie można zrobić coś takiego

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

Answer 4

chciałbym korzystać z funkcji w jQuery toggleClass i zdefiniować CSS do klasy np

/* 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; 
})