JQuery 切换 CSS? ？

我想在 CSS 之间切换，所以当用户点击按钮(#user_button)时，它会显示菜单(#user_options)并改变 CSS，当用户再次点击它时，它会恢复正常。到目前为止，我只知道这些:

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

有人能帮忙吗？

283947 次浏览
小开

您可能希望使用 jQuery 的 。 addClass和 。移除类命令，并为状态创建两个不同的类。对我来说，这是最好的练习方法。

小开
最佳答案

对于低于1.9的 jQuery 版本(参见 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");
});
小开

最好的选择是在 CSS 中设置类样式，如 .showMenu和 .hideMenu，其中包含各种样式。然后你可以做一些像

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

我将使用 jQuery 中的 ToggleClass函数，并为类定义 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;
})
小开

初始代码必须是 边界底部左半径: 0px

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

您可以通过维护如下状态来实现:

$('#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')
}
});

在这里参考 codepen 示例


提交答案