jQuery切换CSS？

74

我想在CSS之间切换，因此当用户单击按钮（#user_button）时，它会显示菜单（#user_options）并更改CSS，而当用户再次单击它时，它将恢复正常。到目前为止，这就是我所拥有的：

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

有人可以帮忙吗？

jquery css toggle

— 爱德海龟
source

2

您可以发布HTML / CSS代码段吗？

— Mike Robinson 2010年

125

对于低于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");
});

— 伊恩·韦瑟比
source

7

由于此方法已在jQuery 1.8中弃用并在jQuery 1.9中删除，因此不再起作用。参见api.jquery.com/toggle-event

— binaryfunt

但是，如果我们有过渡效果呢？在这种情况下，过渡效果将不会应用，对吗？

— Pedram marandi

70

我将在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;
})

— 领带
source

这也是我要做的。更少的造型在你的JS那么

— 大卫叫喊

1

为什么这不是答案？

— Levi Botelho

@Ties-成为第一个发布者肯定很值得。很遗憾，因为它强行对答案的质量产生负面影响。快速反应比彻底反应更好。

— Levi Botelho 2012年

两者都是正确的答案，仅取决于您要使用的方法。我喜欢这个，谢谢

— Zach 2013年

任何人都通过阅读。在使用为解决方案标记的答案之前，请考虑使用此答案。

— 约瑟夫·凯西2014年

4

您可能要使用jQuery的.addClass和.removeClass命令，并为状态创建两个不同的类。对我来说，这将是最佳做法。

— 阿勒克
source

3

toggleClass等同于这些类，除非出于某种原因要删除与添加的类不同的类

— Zach 2013年

2

初始代码必须具有borderBottomLeftRadius：0px

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

— 穆罕默德·希巴尼（Mohamed CHIBANI）
source

1

最好的选择是在CSS中设置类样式，.showMenu并在.hideMenu其中设置各种样式。然后你可以做类似的事情

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

— 蒙兹拉
source

0

您可以通过保持以下状态来进行操作：

$('#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示例中获取参考

— Khem Raj Regmi
source