单击按钮时如何使用 jQuery 切换 CSS 样式？

jQuery Toggle CSS

此问题需要一个 JavaScript 切换器，当用户单击按钮时，它可以在两种 CSS 样式之间切换。第一次单击应显示菜单并调整 CSS，而第二次单击应恢复到原始状态。提供的代码不考虑CSS切换，因此需要一个解决方案。

一个解决方案涉及使用toggle()事件，特别是针对1.9以下的jQuery版本。它的工作原理如下：

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

此代码在第一次单击时将“user_button”元素的边框半径设置为 0px，从而有效地显示“user_options”菜单，并在第二次单击时将其重置为 5px ，将其返回到原始状态。

alecwh 推荐的另一种方法是使用 CSS 类来管理切换。这更干净且更易于维护。修改后的版本如下所示：

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

此代码在第一次单击时将“active”类添加到“user_button”元素，这可能会使其样式不同，并在第二次单击时将其删除，将其恢复到初始状态。

以上是单击按钮时如何使用 jQuery 切换 CSS 样式？的详细内容。更多信息请关注PHP中文网其他相关文章！