toggleClass()的作用是切换被选元素的类，也就是如果有这个类就移除，没有的话就添加。这在动态改变元素样式的时候很常用，比如切换按钮的激活状态或者展开折叠内容时的动画效果。
写出基本的HTML结构，然后引入jQuery库，再写对应的JavaScript代码。比如，一个按钮点击后切换一个div的类，从而改变它的样式。
jQuery 的 toggleClass() 方法进行添加/删除类的切换操作
HTML 结构：
一个按钮 (#toggleBtn) 和一个段落 (#content)。
CSS 类 .highlight：
定义了背景颜色和字体加粗样式。
jQuery 脚本：
使用 $("#toggleBtn").click(...) 绑定点击事件。
调用 $("#content").toggleClass("highlight") 切换段落的 highlight 类：
如果段落已有 highlight 类，则移除。
如果没有，则添加。
点击按钮切换段落背景颜色
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>jQuery toggleClass 示例</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
.highlight {
background-color: yellow;
font-weight: bold;
}
</style>
</head>
<body>
<button id="toggleBtn">切换样式</button>
<p id="content">这是一个段落。</p>
<script>
$(document).ready(function() {
// 点击按钮时切换类
$("#toggleBtn").click(function() {
$("#content").toggleClass("highlight");
});
});
</script>
</body>
</html>1. 切换多个类：
$("#content").toggleClass("highlight bold");
同时切换 highlight 和 bold 类。
2. 带条件的切换（使用函数）：
$("#content").toggleClass(function(index, className) {
return className ? "" : "highlight";
});
根据当前类是否存在决定切换逻辑。
✅ 效果演示：
点击按钮后，段落的背景颜色会在黄色和默认颜色之间切换，字体也会在加粗和正常之间切换。
