ボタンをクリックしたときに jQuery を使用して CSS スタイルを切り替えるにはどうすればよいですか?

jQuery Toggle CSS

この質問では、ユーザーがボタンをクリックしたときに 2 つの CSS スタイルを切り替える JavaScript トグルが必要です。最初のクリックでメニューが表示され、CSS が調整されますが、2 回目のクリックで元の状態に戻ります。提供されたコードでは CSS の切り替えが考慮されていないため、解決策が必要です。

解決策の 1 つは、特に 1.9 より前の jQuery バージョンの場合、toggle() イベントを使用することです。その仕組みは次のとおりです:

$('#user_button').toggle(function () {
    $("#user_button").css({borderBottomLeftRadius: "0px"});
}, function () {
    $("#user_button").css({borderBottomLeftRadius: "5px"});
});

このコードは、最初のクリックで「user_button」要素の境界線の半径を 0px に設定し、実質的に「user_options」メニューを表示し、2 回目のクリックでそれを 5px にリセットします。

alecwh が推奨する別のアプローチには、CSS クラスを使用して切り替えを管理することが含まれます。これはよりクリーンでメンテナンスが容易です。修正されたバージョンは次のようになります。

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

このコードは、最初のクリックで「user_button」要素にクラス「active」を追加します。これにより、おそらくスタイルが異なり、2 回目のクリックで削除されます。初期状態に戻します。

以上がボタンをクリックしたときに jQuery を使用して CSS スタイルを切り替えるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。