Navbar及导航菜单仍被模糊效果影响，toggle相关类无效问题

数据老陈

2026-6-28

问题分析与解决

你遇到的核心问题是：给body加blur类实现背景模糊时，导航栏（nav）和下拉菜单（list）作为body的子元素，会被父级的滤镜效果影响。Tailwind自带的blur-0和blur-none没法抵消这种影响——因为父级的filter: blur()会向下传递，子元素的滤镜是叠加而非覆盖父级的。

快速修复：抵消父级滤镜

先在自定义CSS里加一个类，用来强制取消滤镜：

.no-blur {
  filter: none !important;
}

把JS里的切换逻辑换成这个类：

// 替换原来的 nav.classList.toggle("blur-0") 和 list.classList.toggle("blur-none")
nav.classList.toggle("no-blur");
list.classList.toggle("no-blur");

更优方案：改用独立背景层实现模糊

这种方式不会让导航元素受影响，是弹窗背景模糊的标准实现：

在nav标签后面加一个固定定位的背景模糊层：

<div class="fixed inset-0 bg-black/30 backdrop-blur-md z-0 hidden" id="bg-blur"></div>

修改JS逻辑，不再给body加blur类，而是切换这个背景层的显示状态：

const x = document.getElementById("icon");
const list = document.getElementById("list");
const bgBlur = document.getElementById("bg-blur");

x.onclick = (e) => {
    e.target.classList.value = e.target.classList.value === "fa fa-bars" ? "fa fa-close" : "fa fa-bars";
    list.classList.toggle("max-md:top-[99%]");
    bgBlur.classList.toggle("hidden");
}