From e6ff90e32eeba5b010cdf4c2a6cff8cacce17d10 Mon Sep 17 00:00:00 2001
From: Aurelio De Rosa This method takes one or more class names as its parameter. In the first version, if an element in the matched set of elements already has the class, then it is removed; if an element does not have the class, then it is added. For example, we can apply This method takes one or more class names as its parameter. In the first version, if an element in the matched set of elements already has the class, then it is removed; if an element does not have the class, then it is added. For example, we can apply The first time we apply The first time we apply The second time we apply Applying The second version of The second time we apply Applying The second version of is equivalent to: is equivalent to: As of jQuery 1.4, if no arguments are passed to As of jQuery 1.4, if no arguments are passed to This example will toggle the This example will toggle the .toggleClass()
to a simple <div>
:
+
+
.toggleClass()
to a simple <div>
:
-
<div class="tumble">Some text.</div>
-
$( "div.tumble" ).toggleClass( "bounce" )
, we get the following:
+
+
$( "div.tumble" ).toggleClass( "bounce" )
, we get the following:
-
<div class="tumble bounce">Some text.</div>
-
$( "div.tumble" ).toggleClass( "bounce" )
, the <div>
class is returned to the single tumble
value:
- <div class="tumble">Some text.</div>
.toggleClass( "bounce spin" )
to the same <div>
alternates between <div class="tumble bounce spin">
and <div class="tumble">
..toggleClass()
uses the second parameter for determining whether the class should be added or removed. If this parameter's value is true
, then the class is added; if false
, the class is removed. In essence, the statement:
+
+
$( "div.tumble" ).toggleClass( "bounce" )
, the <div>
class is returned to the single tumble
value:
+ <div class="tumble">Some text.</div>
.toggleClass( "bounce spin" )
to the same <div>
alternates between <div class="tumble bounce spin">
and <div class="tumble">
..toggleClass()
uses the second parameter for determining whether the class should be added or removed. If this parameter's value is true
, then the class is added; if false
, the class is removed. In essence, the statement:
-
$( "#foo" ).toggleClass( className, addOrRemove );
-
+
+
-
if ( addOrRemove ) {
$( "#foo" ).addClass( className );
} else {
$( "#foo" ).removeClass( className );
}
-
.toggleClass()
, all class names on the element the first time .toggleClass()
is called will be toggled. Also as of jQuery 1.4, the class name to be toggled can be determined by passing in a function.
+
+
.toggleClass()
, all class names on the element the first time .toggleClass()
is called will be toggled. Also as of jQuery 1.4, the class name to be toggled can be determined by passing in a function.
-
$( "div.foo" ).toggleClass(function() {
if ( $( this ).parent().is( ".bar" ) ) {
return "happy";
@@ -69,17 +64,17 @@ $( "div.foo" ).toggleClass(function() {
return "sad";
}
});
-
happy
class for <div class="foo">
elements if their parent element has a class of bar
; otherwise, it will toggle the sad
class.happy
class for <div class="foo">
elements if their parent element has a class of bar
; otherwise, it will toggle the sad
class.
-
highlight
on these
paragraphs
]]> - -
+
+ Add the "highlight" class to the clicked paragraph on every third click of that paragraph, remove it every first and second click.
+
-
- Click to toggle (clicks: 0)
highlight (clicks: 0)
on these (clicks: 0)
paragraphs (clicks: 0)
]]>
-
-
- Toggle the class name(s) indicated on the buttons for each div.
-
-
+
+ Toggle the class name(s) indicated on the buttons for each div.
+ div {
float: left;
width: 100px;
@@ -156,7 +150,7 @@ $( "p" ).each(function() {
background-color: cornsilk;
}
]]>
-
@@ -171,7 +165,7 @@ $( "p" ).each(function() {
]]>
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+ 1.4
+
+ A boolean value to determine whether the class should be added or removed.
+
+
+
+ This signature (only!) is deprecated as of jQuery 3.0.
+
+
+
\ No newline at end of file