jQuery перемикати CSS?

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

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

Хто-небудь може допомогти?

Для версій 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, про які згадував alecwh.

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

Я б використав функцію 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;
})

Можливо, ви захочете використовувати команди .addClass та .removeClass jQuery і створити два різні класи для станів. Для мене це був би найкращий спосіб зробити це.

Ініціальний код повинен мати borderBottomLeftRadius: 0px

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

Найкращим варіантом було б встановити стиль класу в CSS, як .showMenuі .hideMenuз різними стилями всередині. Тоді ви можете зробити щось на зразок

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

Ви можете зробити це, підтримуючи стан, як показано нижче:

$('#user_button').on('click',function(){
    if($(this).attr('data-click-state') == 1) {
        $(this).attr('data-click-state', 0);
        $(this).css('background-color', 'red')
      }
    else {
      $(this).attr('data-click-state', 1);
      $(this).css('background-color', 'orange')
    }
  });

Візьміть посилання з прикладу hear codepen