toggle

UK[ˈtɒgl] US[ˈtɑ:gl]

n.スティック ボタン; 投げ縄ボタン; 変換キー; 切り替えキー

v.Switch

class

##UK[klɑ:s] US[klæs]

n.Class; クラス; レベル; タイプ

vt.…を特定のレベルに分類する、考慮する… (または分類する、分類する); put… を特定のクラスに入れる

adj. 非常に良い、優れた、卓越した

vi. ... カテゴリ (またはレベル) に属し、特定のカテゴリ (またはレベル) としてリストされています

jquery toggleClass()方法 構文

関数: toggleClass() 選択した要素を設定または削除する 1 つ以上のクラスを切り替えます。このメソッドは、各要素で指定されたクラスをチェックします。クラスが存在しない場合は追加し、設定されている場合は削除します。これをトグル効果と呼びます。ただし、「switch」パラメータを使用すると、クラスのみを削除または追加のみを指定できます。

# 構文: $(selector).toggleClass(class,switch)

パラメータ:

パラメータ説明
クラス 必須。クラスの指定された要素の追加または削除を指定します。複数のクラスを指定する必要がある場合は、スペースを使用してクラス名を区切ります。
スイッチ オプション。ブール値。クラスを追加するか削除するかを指定します。

関数を使用してクラスを切り替える 構文: $(selector).toggleClass(function(index,class),switch)

パラメータ:

インデックス クラス スイッチ

jquery toggleClass()方法 例

<html>
<head>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").toggleClass("main");
  });
});
</script>
<style type="text/css">
.main
{
font-size:120%;
color:red;
}
</style>
</head>

<body>
<h1 id="h1">This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button class="btn1">切换段落的 "main" 类</button>
</body>
</html>
インスタンスの実行 »

[インスタンスの実行] ボタンをクリックしてオンライン インスタンスを表示します

パラメータ説明
関数(インデックス,クラス) # ＃＃＃＃＃必須。追加または削除する必要がある 1 つ以上のクラス名を返す関数を指定します。
オプション。セレクターのインデックス位置を受け入れます。
オプション。セレクターの現在のクラスを受け入れます。
オプション。ブール値。クラスを追加するか (true)、削除するか (false) を指定します。