jQuery切换CSS?

fcwjkofz  于 2023-03-17  发布在  jQuery
关注(0)|答案(8)|浏览(117)

我想在CSS之间切换,这样当用户点击按钮(#user_button)时,它会显示菜单(#user_options)并更改CSS,当用户再次点击它时,它会恢复正常。

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

有人能帮忙吗?

watbbzwu

watbbzwu1#

对于低于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要好,但是请查看alecwh提到的addClass和removeClass方法。

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

tct7dpnv2#

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

dxxyhpgq3#

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

xmq68pz9

xmq68pz94#

初始代码必须具有borderBottomLeftRadius:0像素

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

tktrz96b5#

最好的选择是在CSS中设置一个类样式,比如.showMenu.hideMenu,其中包含各种样式。

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

zzzyeukh6#

您可以通过保持以下状态来实现此目的:

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

Take a reference from the codepen example here

vxf3dgd4

vxf3dgd47#

$(文档).ready(函数(){

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

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

});
切换菜单已关闭并打开,但导航项未关闭。

syqv5f0l

syqv5f0l8#

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

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

相关问题