javascript - 在 z-index 条件下隐藏 div 的 else-if 语句

Question

我有一个隐藏的覆盖 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>

Answer 1

我无法对您的帖子发表评论，如果没有正确回答您，我深表歉意。

首先是'ifs'，里面的$(this).data("clicked") 是必要的吗？每次开始检查之前，您都使用 $(this).data("clicked", true); 将其设置为 true，因此它有点多余。

然后你检查 .block 是否可见，或者它是否是隐藏，这意味着你永远不会到达第三个如果.

我的问题是我不完全理解您在这里尝试的内容。您希望当单击汉堡包时，会出现一个叠加层，使汉堡包保持在前面，但覆盖层后面的点。当您再次单击汉堡时，叠加层会消失并返回到开始位置。我假设点与汉堡具有相同的行为。

如果这是您想要的行为，那么我会采取更像这样的不同方法:

$(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。
• javascript 代码已重新编写。

编辑:

代码段的更改:

• .burgerMenu 的 z-index 为 4。
• #fab 的 z-index 为 2。
• 删除类 .upfront。
• javascript 代码已重新编写，添加了注释以供解释。