当我单击引导程序下拉链接时,我想触发一个动态的(意味着缓和)灰色网页背景。巨型菜单打开时,应该有灰色背景覆盖网页的其余部分,并且下拉菜单关闭时(通过单击下拉链接,或者通过单击巨型菜单内部的某个位置),覆盖层应该会再次消失。

覆盖层的JavaScript代码正在运行,请参见我的小提琴http://jsfiddle.net/ovaqqgrr/66/

HTML:

 <div id="overlay" onclick="javascript:myFunction();">
 <br>
 &nbsp Please click!
 </div>


CSS:

 #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;
 }


JS:

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";
}
}


现在,我想在单击引导程序下拉列表时获得相同的效果,这就是我得到的结果:https://jsfiddle.net/sykk7dwv/27/

HTML:

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


CSS:

#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;
  }


JS:

$(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两次。您可以在一个事件中合并代码
第二件事用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";
}
}
);
});


希望这可以帮助

关于javascript - 单击 bootstrap 下 zipper 接时,如何获得灰色的网页覆盖?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/50194052/

10-12 12:26
查看更多