Question

我正在设置一个菜单导航，当前该菜单导航为单击汉堡菜单图标时可以显示和隐藏。导航菜单是100％固定覆盖内的容器。

如果您查看JS Fiddle链接，则menunav部分是左侧的白色列，蓝色只是导航器位于其中的覆盖物。

但是，我希望每当他们在菜单导航之外单击时，也可以关闭导航菜单，也可以单击覆盖，而不仅仅是再次单击菜单图标。我已经尝试构建脚本，但是有一些不对的地方-我对e.target不熟悉，但根据我一直在阅读的内容，这似乎是必需的。.（？）

希望对此有所帮助。

我已经构建了到目前为止在JSFiddle中拥有的内容-抱歉，但是我的脚本代码无法在JS部分中使用，因此我不得不将其包含在HTML部分中（如果有人可以帮助，请多谢，为什么就是

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.1/css/all.css">

<div class="yellowmenubar" style="text-align:center;margin:auto;">

<i class="fa fa-navicon" onclick="up(menuscreen);"></i>

<div id="menuscreen" onclick="down(menuscreen);">
    <div id="Menunav">
            </div>
            </div>
            </div>

<script>
function up(menuscreen) {
    var x = document.getElementById("menuscreen");
    if (x.style.display === "block") {
        x.style.display = "none";
    } else {
        x.style.display = "block";
    }
}
function down(menuscreen) {

var x = document.getElementById("menuscreen");
if(e.target.id !== "Menunav"){
 x.style.display = "none";
}

}
</script>


#menuscreen {
    position: fixed; /* Sit on top of the page content */
    display: none; /* Hidden by default */
    width: 100%; /* Full width (cover the whole page) */
    height: 100%; /* Full height (cover the whole page) */
    top: 55px;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 30, 96, 0.9); /* Blue background with opacity */
    z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
    overflow: hidden;
}

#Menunav
{
    width: 400px;
    min-height: 100vh;
    top: -55px;
    float: left;
    background-color: white;
    color: grey;
    position: relative;
    transition: 2s;
    padding: 105px 50px 0 50px;
}

.yellowmenubar
{
    width: 100%;
    height: 55px;
    background-color: #FFD900;
    position: fixed;
    z-index: 2;
    margin-bottom: 50px;
}

.fa-navicon
{
    font-size: 25px;
    float: left;
    color: #003D8E;
    margin-left: 20px;
    margin-top: 15px;
    cursor: pointer;
    transform: rotate(0deg);
}

单击关闭导航栏时如何使用Javascript关闭叠加层

0 个答案: