点击切换元素blur/unblur状态异常，如何修复？

问题根源 #

1. CSS中.blur类的filter值错误，设置为blur(0px)，和.unblur类效果一致，导致切换时无变化
2. JS中使用toggleClass的方式逻辑混乱，没有正确管理两个互斥类的添加/移除
3. 多余的:active伪类与需求无关，属于无效代码

修正后的代码 #

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>

<div id="n">
  <div class="content">
    Hello World!
  </div>
</div>

CSS

.content {
  width: 300px;
  border: solid 1px black;
  padding: 10px;
  filter: blur(8px);
  transition: filter 1s; /* 把过渡效果放在基础类，确保切换时都生效 */
}

.unblur {
  filter: blur(0px); /* 仅用这个类控制清晰状态 */
}

JS

$(document).ready(function() {
  $("#n").click(function() {
    $(".content").toggleClass("unblur"); // 直接切换unblur类，无需额外变量
  });
});

代码说明 #

• 保留.content的默认模糊样式，点击时通过添加/移除.unblur类实现状态切换
• 将transition放在基础类.content中，确保模糊和清晰状态切换时都有平滑过渡
• 简化JS逻辑，直接使用jQuery的click事件和toggleClass方法，避免变量管理和原生API混用的混乱

内容的提问来源于stack exchange，提问作者Dragon RB