web-dev-qa-db-ja.com

jQueryトグルCSS？

CSSを切り替えて、ユーザーがボタン（#user_button）をクリックするとメニュー（#user_options）が表示され、CSSが変更され、ユーザーがもう一度クリックすると通常に戻るようにします。これまでのところ、これがすべてです。

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

誰でも助けることができますか？

jquerycsstoggle
71
Edd Turtle

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

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;
})
65
Ties

JQueryの 。addClass および 。removeClass コマンドを使用し、状態に対して2つの異なるクラスを作成できます。これは、私にとって、それを行うための最良の方法です。

4
alecwh

最適なオプションは、.showMenuや.hideMenuのようなCSSでクラススタイルを設定し、内部にさまざまなスタイルを設定することです。その後、次のようなことができます

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

初期コードにはborderBottomLeftRadius：0pxが必要です

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