Question

前段时间我问了this问题，得到了一个很棒的工作答案。然而，当我继续开发我的项目时，我意识到存在一个问题，我想在这里解决。

有两个元素，汉堡菜单和FAB：当点击/点击时，它们都打开一个菜单，因此当点击任何一个时，叠加显示是有意义的。

问题：目前，如果我点击汉堡菜单，会出现叠加层，并在FAB上方设置为z-index，但如果我关闭汉堡菜单，则叠加层会更改z -index并没有消失。这是我想要的结果，如果FAB菜单在我单击汉堡之前打开（这可以工作），但如果它关闭则不行。

$(document).ready(function() {
  $("#fab").fadeIn("slow");

  // Overlay Animation
  function modifyOverlay(new_z_index) {
    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) {
      $(".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
    }
    // The following two conditions I added to try and get the overlay to stay visible and 
    // simply change z-index if the FAB is clicked and then the burger is as well.
    // This works except now if I just click the burger and then close it, the overlay 
    // only changes z-index and stays visible.
    else if ($(".block").css("z-index") == "3" && $(".tab").is(":visible")) //USING THE ":visible" CONDITION ON THE ".tab" ELEMENTS WORKS FINE HERE AND ACHIEVES THE RESULT I WANT. 
    {
      $(".block").css("z-index", "1");
    } else if ($(".block").css("z-index") == "3" && $(".tab").is(":hidden")) //BUT USING THE SAME TECHNIQUE HERE DOES NOT SEEM TO WORK.
    {
      $(".block").css("display", "none");
    } else {
      $(".block").css("display", "none");
    }
  }

  // Radial Menu Animations
  $("#fab").click(function() {
    modifyOverlay(1);
    $(".dot").toggleClass("dotUp dotDown");
    $(".rotate").toggleClass("rotateActive");
    $(".container").toggleClass("containerUp containerDown");
    $(".bigOne").toggleClass("bigOneOn");
    $(".bigTwo").toggleClass("bigTwoOn");
    $(".bigThree").toggleClass("bigThreeOn");
    $(".bigFour").toggleClass("bigFourOn");
  });

  // Nav Menu Animations
  $(".burgerMenu").click(function() {
    modifyOverlay(3);
    $(".barTop").toggleClass("barTopOn");
    $(".barMid").toggleClass("barMidOn");
    $(".barBot").toggleClass("barBotOn");
    $(".smlOne").toggleClass("smlOnOne");
    $(".smlTwo").toggleClass("smlOnTwo");
    $(".smlThree").toggleClass("smlOnThree");
  });
});

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<!--RADIAL MENU-->
<!--Fixed Container-->
<div id="fixIt">
  <!--Adaptive Container-->
  <div class="square">
    <div class="container containerDown">
      <div id="fab" class="dot dotDown">
        <div id=plusContain class="fab rotate">
          <div id="plus">+</div>
        </div>
      </div>
    </div>
    <!--Radial Buttons-->
    <div id="chest" class="tab bigOne">
      <a href="#" class="iconButton" style="top: -5%;">CLICK<br>ME!</a>
    </div>
    <div id="stretch" class="tab bigTwo">
      <a href="#" class="iconButton">NO<br>ME!</a>
    </div>
    <div id="cardio" class="tab bigThree">
      <a href="#" class="iconButton">Guys...</a>
    </div>
    <div id="legs" class="tab bigFour">
      <a href="#" class="iconButton" style="top: -6%;">NO<br>ME!</a>
    </div>
  </div>
</div>

<!--MENU OVERLAY-->
<div id="overlay" class="block"></div>

<!--FOOTER-->
<div class="footer">
  <!--RADIAL NAV MENU-->
  <div id="navContainer">
    <!--Buttons-->
    <div id="workouts" class="sml smlOne">
      <div class="testOne">
        <a id="navOne" href="#">Go There</a>
      </div>
    </div>
    <div id="home" class="sml smlTwo">
      <div class="testTwo">
        <a id="navTwo" href="#">Go Here</a>
      </div>
    </div>
    <div id="profile" class="sml smlThree">
      <div class="testThree">
        <a id="navThree" href="#">Go Somewhere</a>
      </div>
    </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>
  </div>
</div>

以下是CodePen上的全部内容，其中包含大量注释：https://codepen.io/BGGrieco/pen/RLGbmj?editors=0010

感谢任何可以提供帮助的人，我已经在这一年不到一年了，我仍然不确定一堆东西。

Answer 1

更改您正在使用的z-index的值。使用 -1和3 代替 1和3

else if ($(".block").css("z-index") == "3" && $(".tab").is(":visible"))//USING THE ":visible" CONDITION ON THE ".tab" ELEMENTS WORKS FINE HERE AND ACHIEVES THE RESULT I WANT. 
      {
          $(".block").css("z-index", "-1");
      }

$("#fab").click(function()
    {
      modifyOverlay(-1);
      $(".dot").toggleClass("dotUp dotDown");
      $(".rotate").toggleClass("rotateActive");
      $(".container").toggleClass("containerUp containerDown");
      $(".bigOne").toggleClass("bigOneOn");
      $(".bigTwo").toggleClass("bigTwoOn");
      $(".bigThree").toggleClass("bigThreeOn");
      $(".bigFour").toggleClass("bigFourOn");
    });

这是一个测试链接：https://codepen.io/t_afif/pen/rGWGOK?editors=0010

使用else-if语句

1 个答案: