переключатель jQuery CSS?
Я хочу переключиться между CSS поэтому, когда пользователь нажимает кнопку (#user_button) это показывает меню (#user_options) и изменяет CSS, и когда пользователь нажимает его снова, он возвращается к нормальному. До сих пор это - все, что я имею:
$('#user_button').click( function() {
$('#user_options').toggle();
$("#user_button").css({
borderBottomLeftRadius: '0px',
borderBottomRightRadius: '0px'
});
return false;
});
Кто-либо может помочь?
4 ответа
Для версий 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;
})
Лучшим вариантом было бы установить стиль класса в CSS, например .showMenu и .hideMenu с различными стилями внутри. Затем вы можете сделать что-то вроде
$("#user_button").addClass("showMenu");
Вы можете использовать команды jQuery .addClass и .removeClass и создать два разных класса для состояний. На мой взгляд, это лучший способ сделать это.