极客教程JQuery ToggleClass
在jQuery中，toggleClass() 方法用于在元素之间切换一个或多个类名。如果存在（不存在）这些类，则删除（添加）它们。
语法
$(selector).toggleClass(classname, addOrRemove);
- selector：必需，用于找到要添加或删除类名的元素
- classname：必需，要切换的一个或多个类名，可以是一个用空格分隔的多个类名的字符串
- addOrRemove：一个可选的布尔值参数，用于指示是否向元素添加（true）或删除（false）指定的类名。如果未指定该参数，则该类将被切换。
示例
<!DOCTYPE html>
<html>
<head>
<title>Toggle Class Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<button id="toggle">Toggle Class</button>
<div id="box" style="width: 100px; height: 100px; background-color: red;"></div>
<script>
(document).ready(function(){("#toggle").click(function(){
$("#box").toggleClass("blue");
});
});
</script>
</body>
</html>
在上面的示例中，我们有一个按钮和一个具有红色背景的div元素。当单击按钮时，我们通过toggleClass()方法向div元素添加一个类名”blue”。如果div元素已经具有该类名，则它将被移除。
应用场景
- 动态切换样式：通过切换类名，可以动态改变元素的外观和行为。
- 交互性设计：在用户与页面交互时，通过toggleClass()方法来切换元素的类，可以带来更好的用户体验。
- 动画效果：配合CSS动画，toggleClass()可以实现简单的动画效果。
总的来说，toggleClass()是一个非常有用且易于使用的jQuery方法，可以帮助我们动态管理页面元素的样式。