jQuery如何切换CSS？

Question

我想要切换CSS，当用户点击按钮（#user_button）时显示菜单（#user_options）并更改CSS，再次点击按钮时回到正常状态。目前我只有这些代码：

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

有人能帮忙吗？

- Edd Turtle

---

你能发布你的HTML/CSS代码片段吗？ - Mike Robinson

Answer 1

对于 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更好，可以查看alecwh提到的addClass和removeClass方法。

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

- Ian Wetherbee

---

该方法已经过时，不再适用于jQuery 1.8及以上版本，并在jQuery 1.9中移除。请参阅 http://api.jquery.com/toggle-event/。 - binaryfunt

但是如果我们有过渡效果呢？在这种情况下，过渡效果不会被应用，对吧？ - Pedram marandi

这样做只是将 d-none（boostrap 类）添加到我的 div 元素中，因此我在按钮被点击时使用 $('#user_button').toggleClass('active');。 - LiLika

Answer 2

我会使用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;
})

- Ties

---

这也是我会做的。JS中少些样式。 - David Yell

为什么这不是答案？ - Levi Botelho

@Ties - 成为第一个发布帖子的人肯定是有好处的。但这会对答案的质量产生负面影响，这真是遗憾。快速回复总比彻底回答要好。 - Levi Botelho

两种答案都是正确的，只是取决于你想使用哪种方法。不过我喜欢这个，谢谢。 - Zach

请阅读此内容的任何人，请在使用标记为解决方案的答案之前考虑使用此答案。 - Joseph Casey

Answer 3

您可能希望使用jQuery的.addClass和.removeClass命令，并创建两个不同的状态类。对我来说，这是最佳实践的方法。

- alecwh

---

toggleClass 的作用等同于这些，除非您有某种原因要删除与添加不同的类。 - Zach

Answer 4

初始代码必须具有 borderBottomLeftRadius: 0px。最初的回答。

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

- Mohamed CHIBANI

Answer 5

最好的选择是在CSS中设置类样式，如.showMenu和.hideMenu，并在其内部添加各种样式。然后您可以执行以下操作：

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

- Munzilla

Answer 6

您可以通过以下方式维护状态来实现这一点：

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

Answer 7

$(document).ready(function(){

    $('#toggle').active('click', function(){
        $(".navbar-collapse").addClass("show");
    });

    $('#toggle .active').on('click', function(){
        $(".navbar-collapse").removeClass("hide");
    });

});

切换菜单已经关闭和打开，但导航项没有关闭。

- Chandrahas Patil

---

这个答案看起来与已经被接受的答案非常相似。 - Shane

Answer 8

$('#user_button').on('click', function() {
  $("#user_button").toggleClass('active');
});

#user_option.active {
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
}

- XkriPt

---

这只是重复现有的答案，没有任何上下文或解释。 - Chris