如何使用 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

你切换了正文。这就是您只需要切换 class .menu-ul

的问题

您在点击功能中做了：

$("body").toggleClass("blur-body")

但如果您只想要菜单，请执行此操作：

$(".menu-ul").toggleClass("blur-body")

完整代码如下：

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

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

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>

<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>
</body>
</html>

Answer 2

像这样更新你的 JS

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

现在可以了

Answer 3

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 元素添加一个额外的 class，如下面的代码片段所示，并使用属性选择器和 :not 而不是 class 选择器。

$(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>

Answer 4

您可以按照以下方式进行操作。 Select body 除菜单外的所有子元素。

("body *").not('.menu-ul, .menu-ul > li').toggleClass("blur-body")

以下是工作片段。

$(document).ready(function(){
    $("button").click(function(){
       $("body *").not('.menu-ul, .menu-ul > li').toggleClass("blur-body")
       $(".menu-ul").slideToggle("slow")
    });
});

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

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>

<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>
</body>
</html>

Answer 5

只需在您现有的代码中试试这个。

.blur-body,.blur-body *:not(.menu-ul) {
  -webkit-filter: blur(5px);
  filter: blur(5px);
}

如何使用 jQuery 在 body 中生效，但对特定 div 无效

How to give effect in body but not for particular div using jQuery

html

css

blur

css-filters