(点击图片进入关卡)
toggleClass，打开和关闭类，在页面中增进交互性！
简介
toggleClass（） 函数分别根据元素的类是否存在来添加和删除一个类。
默认代码
<!-- 'toggleClass'jQuery函数打开/关闭 -->
<!-- ...类是否关闭/开启 -->
<script>
var image = $("img");
var header = $("h1");
function toggleExpand() {
image.toggleClass("expand");
// 通过使用我们刚刚创建的首位变量，在'h1'标签上切换"expand”类
}
image.on("click", toggleExpand);
// 在'header'上使用'.on（“click”）'来调用toggleExpand：
</script>
<style>
body {
text-align:center;
}
.expand {
100%;
font-size:4em;
}
</style>
<h1>臭名昭著的P.U.G. </h1>
<br>
<img
src="/file/db/thang.type/577d5d4dab818b210046b3bf/portrait.png"/>
<br>
点击Pugicorn
概览
toggleClass
toggleClass() 用于打开和关闭特定的类。你可以把它想象成一盏灯的开关（on/off）。它可以添加（on）类，或者移除（off）类，具体取决于当前的状态是（off）还是（on）。
这适用于特定类型的选择器，例如列表清单或巨大哈巴狗的脸。
转换 解法
<!-- 'toggleClass'jQuery函数打开/关闭 -->
<!-- ...类是否关闭/开启 -->
<script>
var image = $("img");
var header = $("h1");
function toggleExpand() {
image.toggleClass("expand");
// 通过使用我们刚刚创建的首位变量，在'h1'标签上切换"expand”类
header.toggleClass("expand");
}
image.on("click", toggleExpand);
// 在'header'上使用'.on（“click”）'来调用toggleExpand：
header.on("click", toggleExpand);
</script>
<style>
body {
text-align:center;
}
.expand {
100%;
font-size:4em;
}
</style>
<h1>臭名昭著的P.U.G. </h1>
<br>
<img
src="/file/db/thang.type/577d5d4dab818b210046b3bf/portrait.png"/>
<br>
点击Pugicorn
本攻略发于极客战记官方教学栏目，原文地址为：