html - 如何使用 jQuery 在 body 中而不是在特定的 div 中产生效果

Question

我有一个页面，在这个页面中，我有切换菜单。当我打开菜单时，整个 body 变得模糊，但我不希望菜单变得模糊。

我试过:

$(document).ready(function() {
  $("button").click(function() {
    $("body").toggleClass("blur-body")
    $(".menu-ul").slideToggle("slow")
  });
});

.blur-body {
  -webkit-filter: blur(5px);
  filter: blur(5px);
}
.menu-ul {
  display: none
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<p>This is a paragraph.</p>
<span>This is a another paragraph.</span>
<br/>
<br/>
<button>Menu</button>
<ul class="menu-ul">
  <li>1</li>
  <li>11</li>
  <li>111</li>
  <li>1111</li>
  <li>11111</li>
</ul>

Note: This is only a demo. The full website has a lot more content compared to this.

Answer 1

When I open menu, Whole body gets, blured but, I dont want menu Blur.

根据上述说法，我的理解是您希望页面(或正文)除菜单以外的所有部分都被模糊化。为此，您可以使用 not 选择器，然后仅将模糊应用于没有 class='menu-ul' 的子元素。这意味着菜单本身不会模糊。

$(document).ready(function() {
  $("button").click(function() {
    $("body").toggleClass("blur-body")
    $(".menu-ul").slideToggle("slow")
  });
});

.blur-body >:not(.menu-ul) {
  -webkit-filter: blur(5px);
  filter: blur(5px);
}
.menu-ul {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<p>This is a paragraph.</p>
<span>This is a another paragraph.</span>
<div>Some extra content to mimick a page.
  <div>Some other extra content</div>
</div>
<br/>
<br/>
<button>Menu</button>
<ul class="menu-ul">
  <li>1</li>
  <li>11</li>
  <li>111</li>
  <li>1111</li>
  <li>11111</li>
</ul>

---

如果您也希望菜单按钮不模糊，则向 button 元素添加一个额外的类，如下面的代码片段所示，并使用属性选择器和 :not 而不是类选择器。

$(document).ready(function() {
  $("button").click(function() {
    $("body").toggleClass("blur-body")
    $(".menu-ul").slideToggle("slow")
  });
});

.blur-body > *:not([class^='menu-']) {
  -webkit-filter: blur(5px);
  filter: blur(5px);
}
.menu-ul {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<p>This is a paragraph.</p>
<span>This is a another paragraph.</span>
<div>Some extra content to mimick a page.
  <div>Some other extra content</div>
</div>
<br/>
<br/>
<button class='menu-btn'>Menu</button>
<ul class="menu-ul">
  <li>1</li>
  <li>11</li>
  <li>111</li>
  <li>1111</li>
  <li>11111</li>
</ul>