CSS 属性の切り替えは、要素に動的な機能を追加する場合に役立ちます。 1 つのアプローチは、jQuery で .toggle() 関数を使用することです。
提供されたコードの目的は、要素の表示/非表示を切り替え (#user_options)、ボタンの CSS (#user_button) を変更することです。クリックすると。現在のコードには、CSS を元の状態に戻すために必要な機能がありません。
改善された解決策:
jQuery バージョン 1.9 より前の場合:
$('#user_button').toggle(function () { $("#user_button").css({borderBottomLeftRadius: "0px"}); }, function () { $("#user_button").css({borderBottomLeftRadius: "5px"}); });
ただし、より良いアプローチは、CSS クラスを使用してスタイルを処理することです。これにより、柔軟性が向上し、より適切なコード構成が可能になります。
$('#user_button').toggle(function () { $("#user_button").addClass("active"); }, function () { $("#user_button").removeClass("active"); });
このソリューションでは、「アクティブ」クラスに、切り替えられる CSS スタイルが含まれています。これにより、インライン CSS を直接使用する場合に比べて、スタイルの制御が強化され、メンテナンスが容易になります。
以上が動的機能のために jQuery を使用して CSS クラスを切り替えるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。