Question

我有一个隐藏的叠加div，并且一旦点击其中一个按钮就设置为显示。我想这样做，如果单击一个按钮，元素将显示某个z-index，如果再次单击相同的元素，该元素将再次隐藏。但是如果元素是可见的并且单击了第二个div，我只想更改叠加的z-index，当然如果再次单击第二个按钮，我希望叠加层消失。我试图通过If Else语句和jQuery来实现这一点，这里是代码。它没有按照我想要的方式工作，因为我可以使叠加显示，但不会按预期消失/更改z-index。

＆＃13;

$(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.");
    }
  });
});

＆＃13;

/* 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;
}

＆＃13;

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

＆＃13;

Answer 1

在您增加z-index值

的行中

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

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

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

同样，减少值

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

Answer 2

我无法对您的帖子发表评论，如果没有正确回答您，请对不起。

首先，ifs＆＃39;，$(this).data("clicked")在他们内部是必要的？在开始检查之前，每次都会使用$(this).data("clicked", true);将其设置为true，因此它有点多余。

然后你检查.block是visible，如果是hidden，这就意味着你永远不会达到第三个。

我的问题是我不完全明白你在这里尝试的是什么。你想要的是，当点击汉堡时会出现一个叠加层，让汉堡仍然在前面，但是叠加层后面的点。当您再次单击汉堡时，叠加层将消失并返回到开始。我认为点与汉堡具有相同的行为。

如果这是你想要的行为，那么我会采取不同的方法：

＆＃13;

$(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);
    });
});

＆＃13;

/* 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;
}

＆＃13;

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

＆＃13;

代码段上的更改：

.block的z-index为0.
.burgerMenu的z-index为-1。
添加了课程.upfront。
javascript代码已经过重新设计。

修改

代码段上的更改：

.burgerMenu的z-index为4.

#fab的z-index为2.

删除了课程.upfront。

javascript代码已经过重新设计，添加了评论以供说明之用。

Else-if语句隐藏z-index条件下的div

2 个答案: