为什么我的缩进菜单不弹出？

这是我在CodePen.Below上的current project是我的代码。对不起，太长了。我试图通过不添加动画来简化它。为什么我的缩进菜单不弹出？

欲望的影响是，当您单击菜单图标时，第一个导航栏滑入，第二个导航栏滑过。但我不知道我的第二个导航栏在哪里，它没有出现。

//This function retracts the menu bar with the menu icon and expand the menu bar with close icon. 
 
function open(){ 
 
    document.getElementById("openNav").style.width = "0px"; 
 
    document.getElementById("closeNav").style.width = "20%"; 
 
} 
 
//This thing does the opposite of the above function 
 
function close(){ 
 
    document.getElementById("openNav").style.width = "20%"; 
 
    document.getElementById("closeNav").style.width = "0px"; 
 
}

*{ 
 
    padding:0; 
 
    margin:0; 
 
} 
 
html, body{ 
 
    height:100%; 
 
    width:100%; 
 
} 
 
/*First nav bar of the two. You press the menu icon, this bar slides in and the second nav bar slides out.*/ 
 
.openNav{ 
 
    height:100%; 
 
    width:20%; 
 
    background:#111; 
 
} 
 
.openBox{ 
 
    width:100%; 
 
    box-sizing:border-box; 
 
    padding:calc((100% - 50px)/2); 
 
    position:relative; 
 
    bottom:15px; 
 
} 
 
.open{ 
 
    font-size:50px; 
 
    color: #818181; 
 
} 
 
/*Second nav bar with a close button. You press the close button, the bar slides in and the first nav bar slides out.*/ 
 
.closeNav{ 
 
    height:100%; 
 
    width:20%; 
 
    background:#111; 
 
} 
 
.closeBox{ 
 
    width:100%; 
 
    box-sizing:border-box; 
 
    padding:calc((100% - 50px)/2); 
 
    position:relative; 
 
    bottom:15px; 
 
} 
 
.close{ 
 
    font-size:50px; 
 
    color: #818181; 
 
}

<div class='openNav' id='openNav'> 
 
    <div class='openBox'> 
 
    <div class='open' onclick='open()'>&#9776</div> 
 
    </div> 
 
</div> 
 

 
<div class='closeNav' id='closeNav'> 
 
    <div class='closeBox'> 
 
    <div class='close' onclick='close()'>&times;</div> 
 
    </div> 
 
</div>

来源

2017-08-29 user132522

第二个导航栏是在底部？ – AirNoir

我认为问题是，在您单击处理程序，当你调用open()他并没有叫你功能，它呼吁document.open()，其中有完全清除的效果当前页面。如果你在你的函数中加入了一个调试断点，或者只是使用console.log()或alert()来测试它，你会发现你的open()根本没有运行。

如果你给函数的另一个名称代码似乎工作：

//This function retracts the menu bar with the menu icon and expand the menu bar with close icon. 
 
function openNav(){ 
 
    document.getElementById("openNav").style.width = "0px"; 
 
    document.getElementById("closeNav").style.width = "20%"; 
 
} 
 
//This thing does the opposite of the above function 
 
function closeNav(){ 
 
    document.getElementById("openNav").style.width = "20%"; 
 
    document.getElementById("closeNav").style.width = "0px"; 
 
}

*{ padding:0; margin:0; } 
 
html, body{ height:100%; width:100%; } 
 
/*First nav bar of the two. You press the menu icon, this bar slides in and the second nav bar slides out.*/ 
 
.openNav{ height:100%; width:20%; background:#111; } 
 
.openBox{ width:100%; box-sizing:border-box; padding:calc((100% - 50px)/2); position:relative; bottom:15px; } 
 
.open{ font-size:50px; color: #818181; } 
 
/*Second nav bar with a close button. You press the close button, the bar slides in and the first nav bar slides out.*/ 
 
.closeNav{ height:100%; width:20%; background:#111; } 
 
.closeBox{ width:100%; box-sizing:border-box; padding:calc((100% - 50px)/2); position:relative; bottom:15px; } 
 
.close{ font-size:50px; color: #818181; }

<div class='openNav' id='openNav'> 
 
    <div class='openBox'> 
 
    <div class='open' onclick='openNav()'>&#9776</div> 
 
    </div> 
 
</div> 
 

 
<div class='closeNav' id='closeNav'> 
 
    <div class='closeBox'> 
 
    <div class='close' onclick='closeNav()'>&times;</div> 
 
    </div> 
 
</div>

您可能还需要一次立即拨打closeNav()在页面加载设置正确的起始状态。（布局看起来有点奇怪，两个图标都在100％的高度，但这与您似乎要问的问题无关，所以我会忽略它。请注意，我没有更改CSS，只是删除了换行符所以它不会占用我的回答尽可能多的空间。）

来源

2017-08-29 03:43:32 nnnnnn

document.getElementById("openNav").addEventListener("click",open); 
 
document.getElementById("closeNav").addEventListener("click",close); 
 
//This function retracts the menu bar with the menu icon and expand the menu bar with close icon. 
 
function open(){ 
 
    document.getElementById("openNav").style.display = "none"; 
 
    document.getElementById("closeNav").style.display = "block"; 
 
} 
 
//This thing does the opposite of the above function 
 
function close(){ 
 
    document.getElementById("openNav").style.display = "block"; 
 
    document.getElementById("closeNav").style.display = "none"; 
 
}

*{ 
 
    padding:0; 
 
    margin:0; 
 
} 
 
html, body{ 
 
    height:100%; 
 
    width:100%; 
 
} 
 
/*First nav bar of the two. You press the menu icon, this bar slides in and the second nav bar slides out.*/ 
 
.openNav{ 
 
    height:100%; 
 
    width:20%; 
 
    background:#111; 
 
} 
 
.openBox{ 
 
    width:100%; 
 
    box-sizing:border-box; 
 
    padding:calc((100% - 50px)/2); 
 
    position:relative; 
 
    bottom:15px; 
 
} 
 
.open{ 
 
    font-size:50px; 
 
    color: #818181; 
 
} 
 
/*Second nav bar with a close button. You press the close button, the bar slides in and the first nav bar slides out.*/ 
 
.closeNav{ 
 
    height:100%; 
 
    width:20%; 
 
    background:#111; 
 
    display:none; 
 
} 
 
.closeBox{ 
 
    width:100%; 
 
    box-sizing:border-box; 
 
    padding:calc((100% - 50px)/2); 
 
    position:relative; 
 
    bottom:15px; 
 
} 
 
.close{ 
 
    font-size:50px; 
 
    color: #818181; 
 
}

<div class='openNav' id='openNav'> 
 
    <div class='openBox'> 
 
    <div class='open'>&#9776</div> 
 
    </div> 
 
</div> 
 

 
<div class='closeNav' id='closeNav'> 
 
    <div class='closeBox'> 
 
    <div class='close'>&times;</div> 
 
    </div> 
 
</div>

尝试使用addEventListeners代替onclick属性。我改变它显示CSS属性，因为宽度的东西不能正常工作。可能与你的动画有关。

来源

2017-08-29 03:48:02 Torchify

为什么我的缩进菜单不弹出？

回答

相关问题