-
Notifications
You must be signed in to change notification settings - Fork 265
/
Copy pathtoggleClass.xml
244 lines (241 loc) · 9.01 KB
/
toggleClass.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
<?xml version="1.0"?>
<entries>
<entry type="method" name="toggleClass" return="jQuery">
<title>.toggleClass()</title>
<signature>
<added>1.0</added>
<argument name="className" type="String">
<desc>One or more classes (separated by spaces) to be toggled for each element in the matched set.</desc>
</argument>
</signature>
<signature>
<added>1.3</added>
<argument name="className" type="String">
<desc>One or more classes (separated by spaces) to be toggled for each element in the matched set.</desc>
</argument>
<argument name="state" type="Boolean">
<desc>A boolean (not just truthy/falsy) value to determine whether the class should be added or removed.</desc>
</argument>
</signature>
<signature>
<added>3.3</added>
<argument name="classNames" type="Array">
<desc>An array of classes to be toggled for each element in the matched set.</desc>
</argument>
</signature>
<signature>
<added>3.3</added>
<argument name="classNames" type="Array">
<desc>An array of classes to be toggled for each element in the matched set.</desc>
</argument>
<argument name="state" type="Boolean">
<desc>A boolean (not just truthy/falsy) value to determine whether the class should be added or removed.</desc>
</argument>
</signature>
<signature>
<added>1.4</added>
<argument name="function" type="Function">
<argument name="index" type="Integer" />
<argument name="className" type="String" />
<argument name="state" type="Boolean" />
<return type="String" />
<desc>A function returning one or more space-separated class names to be toggled in the class attribute of each element in the matched set. Receives the index position of the element in the set, the old class value, and the state as arguments.</desc>
</argument>
<argument name="state" optional="true" type="Boolean">
<desc>A boolean value to determine whether the class should be added or removed.</desc>
</argument>
</signature>
<signature>
<added>3.3</added>
<argument name="function" type="Function">
<argument name="index" type="Integer" />
<argument name="className" type="String" />
<argument name="state" type="Boolean" />
<return type="String" />
<return type="Array" />
<desc>A function returning one or more space-separated class names or an array of class names to be toggled in the class attribute of each element in the matched set. Receives the index position of the element in the set, the old class value, and the state as arguments.</desc>
</argument>
<argument name="state" optional="true" type="Boolean">
<desc>A boolean value to determine whether the class should be added or removed.</desc>
</argument>
</signature>
<desc>Add or remove one or more classes from each element in the set of matched elements, depending on either the class's presence or the value of the state argument.</desc>
<longdesc>
<p>This method takes one or more classes 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 <code>.toggleClass()</code> to a simple <code><div></code>: </p>
<pre><code>
<div class="tumble">Some text.</div>
</code></pre>
<p>The first time we apply <code>$( "div.tumble" ).toggleClass( "bounce" )</code>, we get the following:</p>
<pre><code>
<div class="tumble bounce">Some text.</div>
</code></pre>
<p>The second time we apply <code>$( "div.tumble" ).toggleClass( "bounce" )</code>, the <code><div></code> class is returned to the single <code>tumble</code> value:</p>
<pre><code><div class="tumble">Some text.</div></code></pre>
<p>Applying <code>.toggleClass( "bounce spin" )</code> to the same <code><div></code> alternates between <code><div class="tumble bounce spin"></code> and <code><div class="tumble"></code>.</p>
<p>The second version of <code>.toggleClass()</code> uses the second parameter for determining whether the class should be added or removed. If this parameter's value is <code>true</code>, then the class is added; if <code>false</code>, the class is removed. In essence, the statement:</p>
<pre><code>
$( "#foo" ).toggleClass( className, addOrRemove );
</code></pre>
<p>is equivalent to:</p>
<pre><code>
if ( addOrRemove ) {
$( "#foo" ).addClass( className );
} else {
$( "#foo" ).removeClass( className );
}
</code></pre>
<p><strong>As of jQuery 1.4</strong>, if no arguments are passed to <code>.toggleClass()</code>, all classes on the element the first time <code>.toggleClass()</code> 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.</p>
<pre><code>
$( "div.foo" ).toggleClass(function() {
if ( $( this ).parent().is( ".bar" ) ) {
return "happy";
} else {
return "sad";
}
});
</code></pre>
<p>This example will toggle the <code>happy</code> class for <code><div class="foo"></code> elements if their parent element has a class of <code>bar</code>; otherwise, it will toggle the <code>sad</code> class.</p>
</longdesc>
<example>
<desc>Toggle the class 'highlight' when a paragraph is clicked.</desc>
<code><![CDATA[
$( "p" ).on( "click", function() {
$( this ).toggleClass( "highlight" );
});
]]></code>
<css><![CDATA[
p {
margin: 4px;
font-size: 16px;
font-weight: bolder;
cursor: pointer;
}
.blue {
color: blue;
}
.highlight {
background: yellow;
}
]]></css>
<html><![CDATA[
<p class="blue">Click to toggle</p>
<p class="blue highlight">highlight</p>
<p class="blue">on these</p>
<p class="blue">paragraphs</p>
]]></html>
</example>
<example>
<desc>Add the "highlight" class to the clicked paragraph on every third click of that paragraph, remove it every first and second click.</desc>
<code><![CDATA[
var count = 0;
$( "p" ).each( function() {
var $thisParagraph = $( this );
var count = 0;
$thisParagraph.on( "click", function() {
count++;
$thisParagraph.find( "span" ).text( "clicks: " + count );
$thisParagraph.toggleClass( "highlight", count % 3 === 0 );
} );
} );
]]></code>
<css><![CDATA[
p {
margin: 4px;
font-size: 16px;
font-weight: bolder;
cursor: pointer;
}
.blue {
color: blue;
}
.highlight {
background: red;
}
]]></css>
<html><![CDATA[
<p class="blue">Click to toggle (<span>clicks: 0</span>)</p>
<p class="blue highlight">highlight (<span>clicks: 0</span>)</p>
<p class="blue">on these (<span>clicks: 0</span>)</p>
<p class="blue">paragraphs (<span>clicks: 0</span>)</p>
]]></html>
</example>
<example>
<desc>Toggle the class name(s) indicated on the buttons for each div.</desc>
<css><![CDATA[
.wrap > div {
float: left;
width: 100px;
margin: 1em 1em 0 0;
padding-left: 3px;
border: 1px solid #abc;
}
div.a {
background-color: aqua;
}
div.b {
background-color: burlywood;
}
div.c {
background-color: cornsilk;
}
]]></css>
<html><![CDATA[
<div class="buttons">
<button>toggle</button>
<button class="a">toggle a</button>
<button class="a b">toggle a b</button>
<button class="a b c">toggle a b c</button>
<a href="#">reset</a>
</div>
<div class="wrap">
<div></div>
<div class="b"></div>
<div class="a b"></div>
<div class="a c"></div>
</div>
]]></html>
<code><![CDATA[
var cls = [ "", "a", "a b", "a b c" ];
var divs = $( "div.wrap" ).children();
var appendClass = function() {
divs.append(function() {
return "<div>" + ( this.className || "none" ) + "</div>";
});
};
appendClass();
$( "button" ).on( "click", function() {
var tc = this.className || undefined;
divs.toggleClass( tc );
appendClass();
});
$( "a" ).on( "click", function( event ) {
event.preventDefault();
divs.empty().each(function( i ) {
this.className = cls[ i ];
});
appendClass();
});
]]></code>
</example>
<category slug="attributes"/>
<category slug="manipulation/class-attribute"/>
<category slug="css"/>
<category slug="version/1.0"/>
<category slug="version/1.3"/>
<category slug="version/1.4"/>
<category slug="version/1.12-and-2.2"/>
<category slug="version/3.3"/>
</entry>
<entry type="method" name="toggleClass" return="jQuery" deprecated="3.0" removed="4.0">
<signature>
<added>1.4</added>
<argument name="state" optional="true" type="Boolean">
<desc>A boolean value to determine whether the class should be added or removed.</desc>
</argument>
</signature>
<longdesc>
<div class="warning"><strong>This signature (only!) is deprecated as of jQuery 3.0</strong>.</div>
</longdesc>
<category slug="deprecated/deprecated-3.0"/>
</entry>
</entries>