如何使用 jQuery 在正文中生效，但不对特定 div 产生影响

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

我试过：

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

注意：这只是一个演示。与此相比，整个网站的内容要多得多。

当我打开菜单时，全身变得模糊，但是，我不想要菜单模糊。

基于上述陈述，我的理解是您希望除菜单以外的页面(或正文(的所有部分都模糊不清。为此，您可以使用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>

只需在现有代码中尝试一下即可。

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

你可以像以下方式一样做。选择除菜单之外的所有主体子元素。

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

你切换了正文。这就是您只需要切换类 .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>

像这样更新你的 JS

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

现在它工作了

相关内容

最新更新

热门标签：