Javascript 单击引导下拉链接时，如何获得灰色网页覆盖？

我想触发一个动态（意思是轻松）灰色网页背景时，点击引导下拉链接。当mega菜单打开时，页面的其余部分应为灰色背景，当下拉菜单关闭时（通过单击下拉链接或单击mega菜单内的某个位置），覆盖层应再次消失

覆盖的JavaScript代码正在工作，请看我的小提琴

HTML:

JS:

现在，我想在单击引导下拉列表时获得相同的效果，这就是我得到的结果：

HTML:

JS:

不知何故，单击引导下拉链接不会触发覆盖。出什么问题了？

首先 不要使用$（文档）。准备两次。可以在一个事件中合并代码 第二件事是用document.getElementById（“overlay”）或变量（e）替换$（'.overlay'，this）

这是经过编辑的代码

$(document).ready(function(){
$(".dropdown").click(            
function() {
$('.dropdown-menu', this).not('.in .dropdown-menu').stop(true,true).slideToggle("400");
$(this).toggleClass('open');
var e = document.getElementById("overlay");
var c = window.getComputedStyle(e).backgroundColor;
if (c === "rgb(255, 255, 255)") {
e.style.background = "#aaaaaa";     
}
else{
e.style.background = "#ffffff";
}
}
);
});

希望这能有所帮助

 #overlay{
 background: #ffffff;
 width: 100vw;
 height: 100vh;
 -webkit-transition: all .5s ease-in-out;
 -moz-transition: all .5s ease-in-out;
 -o-transition: all .5s ease-in-out;
 -ms-transition: all .5s ease-in-out;
 transition: all .5s ease-in-out;
 }

function myFunction() { 
var e = document.getElementById("overlay");
var c = window.getComputedStyle(e).backgroundColor;
if (c === "rgb(255, 255, 255)") {
document.getElementById("overlay").style.background = "#aaaaaa";
} else{
document.getElementById("overlay").style.background = "#ffffff";
}
}

<div class="navbar navbar-default navbar-fixed-top">
   <div class="container">         
      <div class="navbar-header pull-left">     
         <a class="navbar-brand" href="#">Brand</a>
      </div>       
      <div class="navbar-header-menu">
         <ul class="nav navbar-nav centered-navbar">                 
            <li class="dropdown mega-dropdown active" onclick="javascript:myFunction()">
               <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Link1 <span class="caret"></span>
               </a>
               <ul class="dropdown-menu mega-dropdown-menu">
                  <div class="SomeContent">
                    &nbsp Link1
                    <br>
                    &nbsp Link2
                    <br>
                    &nbsp Link3
                    <br>
                  </div>
               </ul>
            </li>
         </ul>
      </div>
   </div>
</div>
<div id="overlay">
</div>

#overlay {
   background: #ffffff;
   width: 100vw;
   height: 100vh;
   -webkit-transition: all .5s ease-in-out;
   -moz-transition: all .5s ease-in-out;
   -o-transition: all .5s ease-in-out;
   -ms-transition: all .5s ease-in-out;
   transition: all .5s ease-in-out;
}

.navbar {
   border: 1px solid #ccc;
   border: 1px solid rgba(0,0,0,.25);
}

.mega-dropdown {
   position: static !important;
   padding-left: 30px;
}

.mega-dropdown-menu {
   padding: 0px 0px !important;
   width: 100% !important;
   box-shadow: none !important;
   -webkit-box-shadow: none !important;
}

.mega-dropdown-menu > li > ul {
   padding: 0 !important;
   margin: 0 !important;
}

.mega-dropdown-menu > li > ul > li {
   list-style: none !important;
}

.mega-dropdown-menu > li > ul > li > a {
   display: block !important;
   color: #222 !important;
   padding: 3px 5px !important;
}

.mega-dropdown-menu .dropdown-header {
   font-size: 18px !important;
   color: #ff3546 !important;
   padding: 5px 60px 5px 5px !important;
   line-height: 30px !important;
}

.navbar-collapse.collapse {
   display: block!important;
}

.navbar-nav>li, .navbar-nav {
   float: left !important;
}

.navbar-header-menu {
   float: left;
}

.navbar-header-menu > .navbar-nav {
    float: left;
    margin: 0;
}

.navbar-header-menu > .navbar-nav > li {
    float: left;
}

.navbar-header-menu > .navbar-nav > li > a {
    padding-top: 15px;
    padding-bottom: 15px;
}

 .navbar-header-menu > .navbar-nav .open .dropdown-menu {
     position: absolute;
     float: left;
     width: auto;
     margin-top: 0;
     background-color: #fff;
     border: 1px solid #ccc;
     border: 1px solid rgba(0,0,0,.15);
     -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
     box-shadow: 0 6px 12px rgba(0,0,0,.175);
  }

  .navbar-header-menu > .navbar-form {
     float: left;
     width: auto;
     padding-top: 0;
     padding-bottom: 0;
     margin-right: 0;
     margin-left: 0;
     border: 0;
     -webkit-box-shadow: none;
     box-shadow: none;
  }

  .navbar-header-menu > .navbar-form > .form-group {
     display: inline-block;
     margin-bottom: 0;
     vertical-align: middle;
  }

  .navbar-header-menu > .navbar-left {
     float: left;
  }

  .navbar-header-menu > .navbar-right {
     float: right !important;
  }

  .navbar-header-menu > *.navbar-right:last-child {
     margin-right: -15px !important;
  }

$(document).ready(function(){
    $(".dropdown").click(            
        function() {
            $('.dropdown-menu', this).not('.in .dropdown-menu').stop(true,true).slideToggle("400");
            $(this).toggleClass('open');        
        }
    );
});

$(document).ready(function(){
    $(".dropdown").click(            
        function() {
           var e = document.getElementById("overlay");
           var c = window.getComputedStyle(e).backgroundColor;
           if (c === "rgb(255, 255, 255)") {
           $('.overlay', this).style.background = "#aaaaaa";     
           }
           else{
           $('.overlay', this).style.background = "#ffffff";
           }
        }
    );
});

$(document).ready(function(){
$(".dropdown").click(            
function() {
$('.dropdown-menu', this).not('.in .dropdown-menu').stop(true,true).slideToggle("400");
$(this).toggleClass('open');
var e = document.getElementById("overlay");
var c = window.getComputedStyle(e).backgroundColor;
if (c === "rgb(255, 255, 255)") {
e.style.background = "#aaaaaa";     
}
else{
e.style.background = "#ffffff";
}
}
);
});