javascript - CSS/JQuery 菜单在 Firefox 中无法正常运行

Question

因此，我创建了可切换的叠加菜单，在所有主要浏览器(甚至在 Internet Explorer 中)对其进行了测试，并且它在除 Firefox(在版本 46 中测试)之外的任何地方都可以正常工作!

问题是，当您通过按“MENU”按钮切换叠加层时，叠加层中的“CLOSE”按钮没有出现，用户被困在打开的菜单上。
它应该是这样的: 这是它的样子 所以我向你寻求帮助，因为我已经没有想法了。

https://jsfiddle.net/fpgkzd2x/5/ - 摆弄工作代码。

HTML代码

<header class="main-nav flex-vhcenter-parent">
    <div class="button ">
        <p>MENU</p>
    </div>
</header>
<nav class="overlay">
<header class="main-nav flex-vhcenter-parent">
    <div class="button ">
        <p>CLOSE</p>
    </div>
</header>

</nav>

SASS 代码

$menu-color: #3c948b;   


.flex-vhcenter-parent{
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  align-items: center;
}



/* Main Nav menu styles */


.button{
  transform: scale(1.3);
  transition: all 500ms;
}


.main-nav{
    display: flex;
    width: 100%;
    transition: all 500ms;
    z-index: 20;
    background-color: $menu-color;
    position: fixed;
    &.fixed{
      .button{
        transition: all 500ms;
        transform: scale(1);
      }
    }

}

header > div{
    width: 20%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.main-nav p{
    margin: 0;
  font-size: 1.5em;
}

/* Toggleable Overlay */
.overlay{
  z-index: 30;
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: #000;
  opacity: 0.90;
  top: -100%;
  transition: top 100ms ease-out;
  .button{
    margin: 0;
    color: #fff;
  }
}

.opened{
  top: 0%;
  transition: top 100ms ease-out;
} 

用于切换的 JQuery 代码

overlay = $(".overlay");
$(".button").click(function(event){
    overlay.toggleClass("opened");
});

Answer 1

Firefox 不完全支持 Display flex看起来像您期望的那样吗？

    $menu-color: #3c948b;   



    .flex-vhcenter-parent{
      display: block;
      justify-content: center;
      align-items: center;
    }



    /* Main Nav menu styles */


    .button{
      transform: scale(1.3);
      transition: all 500ms;
      margin: 0 auto;
    }


    .main-nav{
        display: inline-block;
        width: 100%;
        transition: all 500ms;
        z-index: 20;
        background-color: $menu-color;
        position: absolute;
        text-align: center;
        &.fixed{
          .button{
            margin: 0 auto;
            transition: all 500ms;
            transform: scale(1);
          }
        }

    }

    header > div{
      width: 20%;
      display: block;
      align-items: center;
        justify-content: center;
    }
    .main-nav p{
      margin: 0 auto;
      font-size: 1.5em;
    }

    /* Toggleable Overlay */
    .overlay{
      z-index: 30;
      position: fixed;
      width: 100%;
      height: 100%;
      background-color: #000;
      opacity: 0.90;
      top: -100%;
      transition: top 100ms ease-out;
      .button{
        margin: 0 auto;
        color: #fff;
      }
    }

    .opened{
      top: 0%;
      transition: top 100ms ease-out;
    } 

http://jsfiddle.net/fpgkzd2x/8/