toggle(fn, fn2, [fn3, fn4, ...]) 返回值:jQuery
概述
每次点击后依次调用函数。
如果点击了一个匹配的元素,则触发指定的第一个函数,当再次点击同一元素时,则触发指定的第二个函数,如果有更多函数,则再次触发,直到最后一个。随后的每次点击都重复对这几个函数的轮番调用。
可以使用unbind("click")来删除。
参数
fnFunction
第一数次点击时要执行的函数。
fn2Function
第二数次点击时要执行的函数。
fn3, fn4, ... (可选)Function
更多次点击时要执行的函数。
示例
描述:
对表格的切换一个类
HTML 代码:
<ul>
<li>Go to the store&l...
toggleClass(class, switch) 返回值:jQuery
概述
如果开关switch参数为true则加上对应的class,否则就删除。
参数
classString
要切换的CSS类名
switchBoolean
用于决定元素是否包含class的布尔值。
示例
描述:
每点击三下加上一次 'selected' 类
HTML 代码:
<strong>jQuery 代码:</strong>
jQuery 代码:
var count = 0;
$("p").click(function(){
$(this).toggleClass("highlight", count++ % 3 == 0);
});
...
toggleClass(class) 返回值:jQuery
概述
如果存在(不存在)就删除(添加)一个类。
参数
classString
CSS类名
示例
描述:
为匹配的元素切换 'selected' 类
HTML 代码:
<p>Hello</p><p class="selected">Hello Again</p>
jQuery 代码:
$("p").toggleClass("selected");
结果:
[ <p class="selected">Hello</p>, <p>Hello Again</p> ]
...
toggleClassName
toggleClassName(element, className) -> HTMLElement
切换 element 的 CSS className(在有和无该类名称间切换),并返回元素本身。
样例
<div id="mutsu" class="apple"></div>
$('mutsu').hasClassName('fruit');
// -> false
$('mutsu').toggleClassName('fruit');
// -> element
$('mutsu').hasClassName('fruit');
// -> true
...
toggle
toggle(element) -> HTMLElement
切换 element 的可视性(在隐藏和显示间进行切换)。
样例
<div id="welcome-message"></div>
<div id="error-message" style="display:none;"></div>
$('welcome-message').toggle();
// -> HTMLElement(并隐藏 div#welcome-message)
$('error-message').toggle();
// -> HTMLElement(并显示 div#error-message)
注意
Element.toggle 不能 显示通过 CSS 样式表隐藏的元素。这不是 Prototype 的限制,而是与 CSS display 属性的解析过程有关。
译注:通过在 <style> 标签或外部样...
toggleClassName(element, className) -> HTMLElement
切换 element 的 CSS className(在有和无该类名称间切换),并返回元素本身。
样例
<div id="mutsu" class="apple"></div>
$('mutsu').hasClassName('fruit');
// -> false
$('mutsu').toggleClassName('fruit');
// -> element
$('mutsu').hasClassName('fruit');
// -> true
...
toggle(element) -> HTMLElement
切换 element 的可视性(在隐藏和显示间进行切换)。
样例
<div id="welcome-message"></div>
<div id="error-message" style="display:none;"></div>
$('welcome-message').toggle();
// -> HTMLElement(并隐藏 div#welcome-message)
$('error-message').toggle();
// -> HTMLElement(并显示 div#error-message)
注意
Element.toggle 不能 显示通过 CSS 样式表隐藏的元素。这不是 Prototype 的限制,而是与 CSS display 属性的解析过程有关。
译注:通过在 <style> 标签或外部样式表中定义 ...