我有一个隐藏的叠加div，并且一旦点击其中一个按钮就设置为显示。我想这样做，如果单击一个按钮，元素将显示某个z-index，如果再次单击相同的元素，该元素将再次隐藏。但是如果元素是可见的并且单击了第二个div，我只想更改叠加的z-index，当然如果再次单击第二个按钮，我希望叠加层消失。我试图通过If Else语句和jQuery来实现这一点，这里是代码。它没有按照我想要的方式工作，因为我可以使叠加显示，但不会按预期消失/更改z-index。
$(document).ready(function() {
$(".dot").click(function(){
$(this).data("clicked", true);
});
$(".burgerMenu").click(function() {
$(this).data("clicked", true);
//Overlay Animation
if ($(this).data("clicked") && $(".block").is(":visible")) {
//alert("IT WORKS!");
$(".block").css("z-index", "+1");
} else if ($(this).data("clicked") && $(".block").is(":hidden")) {
$(".block").css("z-index", "+1");
$(".block").css("display", "block");
} else if ($(this).data("clicked") && $(".block").css("z-index") > "-1") {
$(".block").css("display", "none");
} else {
alert("Ah lads.");
}
});
});/* FAB SECTION */
.dot
{
position: absolute;
bottom: 100px;
left: 200px;
}
#fab {
position: absolute;
color: white;
font-size: 18px;
text-align: center;
width: 100px;
height: 100px;
background-color: #6eadea;
border-radius: 50%;
box-shadow: 6px 10px 18px #686868;
}
#plusContain {
position: relative;
width: 100%;
height: 100%;
}
#plus {
position: relative;
margin: auto;
top: 50%;
transform: translateY(-50%);
}
/* DIALOGUE/MENU OVERLAY */
.block {
position: fixed;
width: 100%;
height: 100%;
top: 0;
background-color: red;
opacity: 0.8;
display: none;
z-index: -1;
}
/* BURGER MENU SECTION */
.burgerMenu {
position: absolute;
margin: auto;
height: 50px;
width: 50px;
cursor: pointer;
bottom: 10px;
}
.bar {
height: 6px;
width: 100%;
background-color: black;
}
#top {
position: relative;
top: 5px;
}
#middle {
position: relative;
top: 15px;
}
#bottom {
position: relative;
top: 25px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="fab" class="dot dotDown">
<div id=plusContain class="fab rotate">
<div id="plus">+</div>
</div>
</div>
<!--MENU OVERLAY-->
<div id="overlay" class="block"></div>
<!--Burger-->
<div id="burger" class="burgerMenu">
<div id="top" class="bar barTop"></div>
<div id="middle" class="bar barMid"></div>
<div id="bottom" class="bar barBot"></div>
</div>
答案 0 :(得分：1)
在您增加z-index值
的行中$(".block").css("z-index", "+1");
您将z-index的值设置为正1的值。 相反，这应该是
$(".block").css("z-index", "+=1");
同样，减少值
$(".block").css("z-index", "-=1");
答案 1 :(得分：1)
我无法对您的帖子发表评论，如果没有正确回答您，请对不起。
首先，ifs＆＃39;，$(this).data("clicked")在他们内部是必要的？在开始检查之前，每次都会使用$(this).data("clicked", true);将其设置为true，因此它有点多余。
然后你检查.block是visible，如果是hidden，这就意味着你永远不会达到第三个。
我的问题是我不完全明白你在这里尝试的是什么。你想要的是，当点击汉堡时会出现一个叠加层，让汉堡仍然在前面，但是叠加层后面的点。当您再次单击汉堡时，叠加层将消失并返回到开始。我认为点与汉堡具有相同的行为。
如果这是你想要的行为，那么我会采取不同的方法：
$(document).ready(function() {
function modifyOverlay(new_z_index) {
/** If the overlay is hidden, we just show it with the z-index we
* get in new_z_index (new_z_index == 1 means that dot was clicked,
* new_z_index == 3 means that burger was clicked)
*/
if ($(".block").is(":hidden")) {
$(".block").css("display", "block");
$(".block").css("z-index", new_z_index); // 1 or 3
} else if ($(".block").css("z-index") != new_z_index) {
/** Because of the first if, we know that the overlay
* is visible (which means it has z-index 1 or 3).
* The only time the current z-index of the overlay will
* be different from the new_z_index (this is what we are
* checking on this if) is when you click the burger
* (new_z_index == 3) while the dot is also upfront
* (current overlay z-index == 1)
*/
$(".block").css("z-index", new_z_index); // So we just set the z-index
// to new_z_index (which will
// be 3) hidding the dot
} else {
/** If we get to this else, we know that the overlay is visible
* (because of the first if) and we know that the current
* z-index is equal to the new_z_index (because of the second
* if).
* So the possible cases are:
* overlay's z-index is 3, and we pressed the burger (3)
* or overlay's z-index is 1, and we pressed the dot (1),
* both cases mean we hide the overlay
*/
$(".block").css("display", "none");
$(".block").css("z-index", "0");
}
}
$(".dot").click(function(){
//Overlay Animation
modifyOverlay(1);
});
$(".burgerMenu").click(function() {
//Overlay Animation
modifyOverlay(3);
});
});/* FAB SECTION */
.dot
{
position: absolute;
bottom: 100px;
left: 200px;
}
#fab {
position: absolute;
color: white;
font-size: 18px;
text-align: center;
width: 100px;
height: 100px;
background-color: #6eadea;
border-radius: 50%;
box-shadow: 6px 10px 18px #686868;
z-index: 2;
}
#plusContain {
position: relative;
width: 100%;
height: 100%;
}
#plus {
position: relative;
margin: auto;
top: 50%;
transform: translateY(-50%);
}
/* DIALOGUE/MENU OVERLAY */
.block {
position: fixed;
width: 100%;
height: 100%;
top: 0;
background-color: red;
opacity: 0.8;
display: none;
z-index: 0;
}
/* BURGER MENU SECTION */
.burgerMenu {
z-index: 4;
position: absolute;
margin: auto;
height: 50px;
width: 50px;
cursor: pointer;
bottom: 10px;
}
.bar {
height: 6px;
width: 100%;
background-color: black;
}
#top {
position: relative;
top: 5px;
}
#middle {
position: relative;
top: 15px;
}
#bottom {
position: relative;
top: 25px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="fab" class="dot dotDown">
<div id=plusContain class="fab rotate">
<div id="plus">+</div>
</div>
</div>
<!--MENU OVERLAY-->
<div id="overlay" class="block"></div>
<!--Burger-->
<div id="burger" class="burgerMenu">
<div id="top" class="bar barTop"></div>
<div id="middle" class="bar barMid"></div>
<div id="bottom" class="bar barBot"></div>
</div>
代码段上的更改：
.block的z-index为0. .burgerMenu的z-index为-1。.upfront。修改
代码段上的更改：
.burgerMenu的z-index为4. #fab的z-index为2. .upfront。