用于隐藏 z 索引条件上的 div 的 else-if 语句

Question

我有一个隐藏的叠加div，并设置为在单击两个按钮中的任何一个时显示。我想这样做，如果单击一个按钮，该元素将显示某个 z 索引，如果再次单击同一元素，该元素将再次隐藏。但是，如果元素可见并且单击了第二个div，我只想更改叠加层的 z 索引，当然，如果再次单击第二个按钮，我希望叠加层消失。我正在尝试使用 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>

Answer 1

我无法评论您的帖子，抱歉没有正确回答您。

首先是"如果"，$(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 指数为 0。
• .burgerMenu的 z 指数为 -1。
• 添加了类.upfront。
• javascript 代码已被重新设计。

编辑：

代码段上的更改：

• .burgerMenu的 z 指数为 4。
• #fab的 z 指数为 2。
• 删除了类.upfront。
• javascript代码已被重新设计，添加了注释以用于解释目的。

Answer 2

在增加 z 索引值的行中

$(".block").css("z-index", "+1");

您将 z 指数的值设置为正 1 的值。 相反，这应该是

$(".block").css("z-index", "+=1");

同样，要减小值

$(".block").css("z-index", "-=1");