Jquery 当单击下拉菜单出现时，模糊所有内容

当点击下拉菜单出现，我想模糊舞台上的一切，但它只是模糊的身体！我有一个白色的句子，当它模糊时，我仍然能看到句子的白色。这意味着模糊在句子下面！我怎样才能在所有的东西上面，但在下拉菜单下面得到模糊

请帮我一把。谢谢

HTML

JS

由于（h1）元素是主体的子元素，因此它将始终放置在主体之前。对于这个特定示例的快速修复，可以向overlay css类添加颜色属性，但这与实际的overlay不同

要使用当前设置创建动态创建的覆盖，可以使用覆盖类向单击的元素添加div。只有叠加css

position

属性应更改为

fixed

  $('.clicker').click(
        function()
        {
           var obj = $(this).children('.overlay');              
           if(obj.length===0)
              $('<div/>', { class: 'overlay'}).appendTo($(this));
           else
             obj.remove();

        }
    );

$（'.clicker'）。单击(
函数（）
{
var obj=$（this.children（'.overlay'）；
如果（对象长度===0）
$（''，{class:'overlay'}）.appendTo（$（this））；
其他的
obj.remove（）；
}
);

（与您自己设置的唯一区别是位置：固定和上面显示的单击功能）

---

注意，有更好的通用解决方案可用于此，但这是使用给定场景的特定设置进行的快速修复。

创建一个覆盖毯并将其附加到单击的菜单上。请直接提供更多详细信息，好吗？非常感谢！我根据你的指示改变了，它在一个简单的页面中工作，但是当我把这些编码变成一个繁忙的页面，有更多的身体子体时，模糊并没有像预期的那样出现。我想知道为什么。我现在可以用了，一切都很模糊，包括下拉菜单，还有按钮！我尝试在下拉菜单上应用Z-index，但它无法帮助我打开它。有什么想法吗？如果没有看到目前的情况，很难说。第一条评论中的问题是否通过向overlay css类添加z索引解决了？您是否碰巧有一个示例html页面，其中原始页面不起作用？

body {background-color:#94dcff; color:white}

.click-nav {margin:100px auto;width:200px;}
.click-nav ul {position:relative;font-weight:900;}
.click-nav ul li {position:relative;list-style:none;cursor:pointer;}
.click-nav ul li ul {position:absolute;left:0;right:0;}
.click-nav ul .clicker {position:relative;background:#2284B5;color:#FFF;}
.click-nav ul .clicker:hover,.click-nav ul .active {background:#196F9A;}
.click-nav img {position:absolute;top:9px;left:12px;}
.click-nav ul li a {transition:background-color 0.2s ease-in-out;-webkit-transition:background-color 0.2s ease-in-out;
-moz-transition:background-color 0.2s ease-in-out;display:block;padding:8px 10px 8px 40px;background:#FFF;color:#333;text-decoration:none;}
.click-nav ul li a:hover {background:#F2F2F2;}

/* Fallbacks */
.click-nav .no-js ul {display:none;}
.click-nav .no-js:hover ul {display:block;}

.overlay {
    position:absolute;

    /* color with alpha transparency */
    background-color: rgba(0, 0, 0, 0.3);

    /* stretch to screen edges */
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

$(function () {
  $('.click-nav > ul').toggleClass('no-js js');
  $('.click-nav .js ul').hide();
  $('.click-nav .js').click(function(e) {
    $('.click-nav .js ul').slideToggle(200);
    $('.clicker').toggleClass('active');
    e.stopPropagation();
  });
  $(document).click(function() {
    if ($('.click-nav .js ul').is(':visible')) {
      $('.click-nav .js ul', this).slideUp();
      $('.clicker').removeClass('active');
    }
  });
  $('.clicker').click(
            function()
            {
                $('body').toggleClass('overlay');
            }
        );
});

  $('.clicker').click(
        function()
        {
           var obj = $(this).children('.overlay');              
           if(obj.length===0)
              $('<div/>', { class: 'overlay'}).appendTo($(this));
           else
             obj.remove();

        }
    );