jQuery toggleClass() 方法
实例
在添加和删除所有 <p> 元素的 "main" 类名之间切换:
<!DOCTYPE html>
<html>
<head>
<script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").toggleClass("main");
});
});
</script>
<style>
.main {
font-size: 120%;
color: red;
}
</style>
</head>
<body>
<button>切换 p 元素的 "main" 类</button>
<p>这是一个段落</p>
<p>这是另一个段落</p>
<p><b>注意:</b> 多次单击该按钮可查看切换效果</p>
</body>
</html>
定义与用法
toggleClass()
方法在添加和删除选定元素中的一个或多个样式类名之间切换。
此方法检查每个元素的指定样式类名。如果缺少类名,则添加类名,如果已经设置,则删除类名——这会产生切换效果。
但是,通过使用 "switch" 参数,可以指定仅删除或仅添加类名。
语法
$(selector).toggleClass(classname,function(index,currentclass),switch)
参数 | 描述 |
---|---|
classname | 必填。指定要添加或删除的一个或多个样式类名。要指定多个类,请用空格分隔类名 |
function(index,currentclass) | 可选。指定返回一个或多个要添加/删除的类名的函数
|
switch | 可选。一个布尔值,指定是添加类(true),还是删除类(false) |