以下转自jquery文档
jquery的toggle
返回值:jQuerytoggle(fn, fn2, [fn3, fn4, ...])
概述
每次点击后依次调用函数。
如果点击了一个匹配的元素,则触发指定的第一个函数,当再次点击同一元素时,则触发指定的第二个函数,如果有更多函数,则再次触发,直到最后一个。随后的每次点击都重复对这几个函数的轮番调用。
可以使用unbind("click")来删除。
参数
fnFunction
第一数次点击时要执行的函数。
fn2Function
第二数次点击时要执行的函数。
fn3, fn4, ... (可选)Function
更多次点击时要执行的函数。
示例
描述:
对表格的切换一个类
HTML 代码:
<ul>
<li>Go to the store</li>
<li>Pick up dinner</li>
<li>Debug crash</li>
<li>Take a jog</li>
</ul>
jQuery 代码:
$("td").toggle(
function () {
$(this).addClass("selected");
},
function () {
$(this).removeClass("selected");
}
);
描述:
对列表的切换样式
HTML 代码:
<ul>
<li>Go to the store</li>
<li>Pick up dinner</li>
<li>Debug crash</li>
<li>Take a jog</li>
</ul>
jQuery 代码:
$("li").toggle(
function () {
$(this).css({"list-style-type":"disc", "color":"blue"});
},
function () {
$(this).css({"list-style-type":"disc", "color":"red"});
},
function () {
$(this).css({"list-style-type":", "color":"});
}
);
jQuery外观效果
addClass(class)和removeClass(class)
代码:
- $(".stripe tr").mouseover(function(){
- $(this).addClass("over");}).mouseout(function(){
- $(this).removeClass("over");})
- });
也可以写成:
- $(".stripe tr").mouseover(function() { $(this).addClass("over") });
- $(".stripe tr").mouseout(function() { $(this).removeClass("over") });
作用:为指定的元素添加或移除样式,从而实现动态的样式效果,上面的实例中实现鼠标移动双色表格的代码