`.toggleClass()` 方法详解-优快云博客

`.toggleClass()` 方法详解

在JavaScript中，.toggleClass() 是一个非常有用的jQuery方法，它允许开发者根据特定的条件动态地切换元素的类（class）。这种方法常用于实现交互效果，如按钮的高亮显示、切换显示/隐藏内容等。以下是关于 .toggleClass() 方法的详细解析。

1. 基本用法

.toggleClass(class, [switch]) 方法接受两个参数：

class：需要切换的CSS类名。
[switch]：可选参数，当为true时，添加指定类；为false时，移除指定类。

$("#element").toggleClass("class");

如果没有提供 [switch] 参数，.toggleClass() 方法会根据元素的当前状态切换类。如果元素已经有指定的类，则移除它；如果没有，则添加该类。

2. 例子

以下是一个简单的例子，演示如何使用 .toggleClass() 方法切换按钮的类，从而改变其背景颜色。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Toggle Class Example</title>
<style>
    .active {
        background-color: red;
    }
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<button id="toggleBtn">切换颜色</button>

<script>
    $(document).ready(function() {
        $("#toggleBtn").click(function() {
            $(this).toggleClass("active");
        });
    });
</script>
</body>
</html>

当点击按钮时，它会切换 .active 类，从而改变其背景颜色。