当我单击引导程序下拉链接时,我想触发一个动态的(意味着缓和)灰色网页背景。巨型菜单打开时,应该有灰色背景覆盖网页的其余部分,并且下拉菜单关闭时(通过单击下拉链接,或者通过单击巨型菜单内部的某个位置),覆盖层应该会再次消失。
覆盖层的JavaScript代码正在运行,请参见我的小提琴http://jsfiddle.net/ovaqqgrr/66/。
HTML:
<div id="overlay" onclick="javascript:myFunction();">
<br>
  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">
  Link1
<br>
  Link2
<br>
  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/