1. ホーム
  2. jquery

[解決済み] jQuery toggle CSS?

2022-03-07 21:33:58

質問

ユーザーがボタンをクリックすると、CSSが切り替わるようにしたい( #user_button ) を表示し、メニュー ( #user_options ) とCSSを変更し、ユーザーが再びクリックすると元に戻ります。今のところ、これだけです。

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

誰か助けてください。

解決方法は?

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