jQuery ボタンのクリックで CSS 状態を切り替える方法

jQuery ボタン クリックで CSS 状態を切り替える

インタラクティブな Web アプリケーションを構築する場合、多くの場合、ユーザー入力に基づいてさまざまな CSS 状態を切り替えることが必要になります。 。このシナリオでは、ボタンのクリック時にメニューを表示し、その外観を変更したいとします。

解決策:

提供されたコードは、toggle メソッドを使用して、 ID「user_button」のボタンをクリックすると、ID「user_options」のメニューが表示されます。ただし、CSS プロパティを切り替える機能はありません。

これに対処するには、コールバック関数で toggle メソッドを使用するか、jQuery の addClass メソッドとremoveClass メソッドを利用します。

Usingコールバック関数 (jQuery

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

このコードは 2 つのコールバック関数を定義します。1 つはボタンが最初にクリックされたとき (スライド効果) で、もう 1 つは再度クリックされたとき (元の状態に戻る) です。

または、クラス:

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

ここでは、CSS プロパティを直接変更する代わりに、CSS クラス (この場合は「アクティブ」) を追加および削除して、目的のスタイルを切り替えます。この方法はより柔軟であり、ハードコーディングされた CSS 値の使用を回避します。

これらのソリューションのいずれかを実装すると、ボタンに応じてメニュー要素の表示と CSS の外観を切り替えるという目的の機能を実現できます。クリックします。

以上がjQuery ボタンのクリックで CSS 状態を切り替える方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。