Question

这是CodePen上的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>

Answer 1

我认为问题在于，在您点击处理程序时，当您致电open()时，它不会调用您的函数，而是调用document.open()，它具有完全清除当前页面的效果。如果您在函数中放置调试断点，或者只是使用console.log()或alert()来测试它，那么您将看到open()根本没有运行。

如果你给函数另一个名字代码似乎有效：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

您可能还希望在页面加载时立即调用closeNav()以设置正确的启动状态。（布局似乎有点奇怪，两个图标都处于100％高度，但这与您似乎要问的问题无关，所以我会忽略它。请注意，我没有改变你的CSS，我只是删除了换行符，所以它不会占用我答案中的空间。）

Answer 2

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属性，因为宽度不正常。可能与你的动画有关。

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

2 个答案: