jQuery переключать CSS?

Question

Я хочу переключаться между CSS, поэтому, когда пользователь нажимает кнопку (#user_button), он отображает меню (#user_options) и меняет CSS, а когда пользователь нажимает его снова, он возвращается к обычному режиму.Пока это все, что у меня есть:

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

Кто-нибудь может помочь?

Answer 1

Для версий jQuery ниже 1.9 (см. https://api.jquery.com/toggle-event):

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

Использование классов в этом случае было бы лучше, чем прямая установка css, хотя, посмотрите на методы addClass и removeClass, упомянутые выше.

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

Answer 2

Я бы использовал функцию toggleClass в jQuery и определил CSS для класса, например,

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

Answer 3

Возможно, вы захотите использовать команды jQuery .addClass и .removeClass и создать два разных класса для состояний. Для меня это был бы лучший практический способ сделать это.

Answer 4

Лучшим вариантом было бы установить стиль класса в CSS, например .showMenu и .hideMenu с различными стилями внутри. Тогда вы можете сделать что-то вроде

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

Answer 5

Код инициализации должен иметь borderBottomLeftRadius: 0px

$('#user_button').toggle().css('borderBottomLeftRadius','+5px');