需要2次点击才能激活按钮

问题描述：

我正在努力赚取Javascript，特别是如何添加onclick事件和操作DOM。需要2次点击才能激活按钮

我在Codepen上设置了一个真实世界的例子。

挤你的浏览器，你会得到顶部的经典“汉堡包”菜单。这工作正常，除了（刷新页面后）我必须点击汉堡两次才能激活它。

下面的代码：

var hamburger = document.getElementById("burger"), 
 
menu = document.getElementById("myMenu"); 
 

 

 
hamburger.addEventListener("click",function(e){ 
 
    if (menu.style.height==="0px"){ 
 
    menu.style.height="480px"; 
 
    hamburger.style.transform="rotate(90deg)"; 
 
    }else{ 
 
    menu.style.height="0px"; 
 
    hamburger.style.transform="rotate(0deg)"; 
 
    } 
 
});

body { 
 
    font: 13pt/130% 'Linden Hill', Times, 'Times New Roman', serif; 
 
    background: #BEDFFC; 
 
    margin: 0; 
 
} 
 

 
#burger { 
 
    display: none; 
 
    color: #BEDFFC; 
 
    font-size: 2em; 
 
    line-height: 1.25em; 
 
    position: relative; 
 
    transition: all .25s; 
 
    height: 1em; 
 
    width: 1em; 
 
    left:20px; 
 
    top:10px; 
 
    transform: rotate(45deg); 
 
} 
 

 
nav { 
 
    width: 100%; 
 
    margin: 0 auto; 
 
} 
 

 
nav ul { 
 
    list-style: none; 
 
} 
 

 
nav a { 
 
    font: .9em 'Archivo Narrow', "Helvetica Neue", sans-serif; 
 
    display: block; 
 
    float: left; 
 
    text-align:center; 
 
    text-decoration: none; 
 
    width: 12%; 
 
    margin-right: 1%; 
 
    color: rgba(122, 166, 216, 0.87); 
 
    border: 1px solid rgba(220, 247, 253, 0.55); 
 
    border-radius: 0px 10px 0px 0px; 
 
    transition: all .5s ease; 
 
} 
 

 
nav a.current, 
 
nav a:hover { 
 
    color: #dbebf7; 
 
    text-decoration: none; 
 
    background: #539fd9; 
 
} 
 

 
@media only screen and (max-width: 800px) { 
 
    nav { 
 
    background: #265980; 
 
    width: 100vw; 
 
    height: 60px; 
 
    transition: all.5s; 
 
    } 
 
    nav a { 
 
    float: none; 
 
    border-radius: 0; 
 
    background: hsla(209, 78%, 93%,.75); 
 
    width:100%; 
 
    height: 40px; 
 
    font-size: 30px; 
 
    } 
 
    
 
    #myMenu { 
 
    width: 75%; 
 
    height: 0px; 
 
    margin: 18px auto; 
 
    padding: 0; 
 
    transition: all .25s; 
 
    overflow: hidden; 
 
    } 
 
    #burger { 
 
    display: initial; 
 

 
    } 
 
    #burger:hover{ 
 
    color:white; 
 
    } 
 
}


 
<nav id="myNav"> 
 
    <div id="burger">&#9776;</div> 
 
     <ul id="myMenu"> 
 
     <li><a href="#" class="current">menu 1</a></li> 
 
     <li><a href="#" >menu 2</a></li> 
 
     <li><a href="#">menu 3</a></li> 
 
     <li><a href="#" title="interactive">menu 4</a></li> 
 
     <li><a href="#">menu 5</a></li> 
 
     <li><a href="#">menu 6</a></li> 
 
\t <li><a href="#">menu 7</a></li> 
 
</ul> 
 
</nav>

现在，如果我删除的条件在的addEventListener块，只是改变元素的样式，它工作正常。

var hamburger = document.getElementById("burger"), 
 
menu = document.getElementById("myMenu"); 
 

 
//works, but doesn't toggle, of course... 
 
hamburger.addEventListener("click",function(e){ 
 
    menu.style.height="480px"; 
 
    
 
});

body { 
 
    font: 13pt/130% 'Linden Hill', Times, 'Times New Roman', serif; 
 
    background: #BEDFFC; 
 
    margin: 0; 
 
} 
 

 
#burger { 
 
    display: none; 
 
    color: #BEDFFC; 
 
    font-size: 2em; 
 
    line-height: 1.25em; 
 
    position: relative; 
 
    transition: all .25s; 
 
    height: 1em; 
 
    width: 1em; 
 
    left:20px; 
 
    top:10px; 
 
    transform: rotate(45deg); 
 
} 
 

 
nav { 
 
    width: 100%; 
 
    margin: 0 auto; 
 
} 
 

 
nav ul { 
 
    list-style: none; 
 
} 
 

 
nav a { 
 
    font: .9em 'Archivo Narrow', "Helvetica Neue", sans-serif; 
 
    display: block; 
 
    float: left; 
 
    text-align:center; 
 
    text-decoration: none; 
 
    width: 12%; 
 
    margin-right: 1%; 
 
    color: rgba(122, 166, 216, 0.87); 
 
    border: 1px solid rgba(220, 247, 253, 0.55); 
 
    border-radius: 0px 10px 0px 0px; 
 
    transition: all .5s ease; 
 
} 
 

 
nav a.current, 
 
nav a:hover { 
 
    color: #dbebf7; 
 
    text-decoration: none; 
 
    background: #539fd9; 
 
} 
 

 
@media only screen and (max-width: 800px) { 
 
    nav { 
 
    background: #265980; 
 
    width: 100vw; 
 
    height: 60px; 
 
    transition: all.5s; 
 
    } 
 
    nav a { 
 
    float: none; 
 
    border-radius: 0; 
 
    background: hsla(209, 78%, 93%,.75); 
 
    width:100%; 
 
    height: 40px; 
 
    font-size: 30px; 
 
    } 
 
    
 
    #myMenu { 
 
    width: 75%; 
 
    height: 0px; 
 
    margin: 18px auto; 
 
    padding: 0; 
 
    transition: all .25s; 
 
    overflow: hidden; 
 
    } 
 
    #burger { 
 
    display: initial; 
 

 
    } 
 
    #burger:hover{ 
 
    color:white; 
 
    } 
 
}


 
<nav id="myNav"> 
 
    <div id="burger">&#9776;</div> 
 
     <ul id="myMenu"> 
 
     <li><a href="#" class="current">menu 1</a></li> 
 
     <li><a href="#" >menu 2</a></li> 
 
     <li><a href="#">menu 3</a></li> 
 
     <li><a href="#" title="interactive">menu 4</a></li> 
 
     <li><a href="#">menu 5</a></li> 
 
     <li><a href="#">menu 6</a></li> 
 
\t <li><a href="#">menu 7</a></li> 
 
</ul> 
 
</nav>

寻找一个纯JavaScript，非jQuery的回答在这里。

我在这里做错了什么？提前致谢。

答

这里的问题在于menu.style.height属性未初始化为"0px"，但是""。修改你的逻辑，包括这种情况下，使切换按预期方式工作：

var hamburger = document.getElementById("burger"), 
 
menu = document.getElementById("myMenu"); 
 

 

 
hamburger.addEventListener("click",function(e){ 
 
    if (menu.style.height==="0px" || menu.style.height===""){ 
 
    menu.style.height="480px"; 
 
    hamburger.style.transform="rotate(90deg)"; 
 
    }else{ 
 
    menu.style.height="0px"; 
 
    hamburger.style.transform="rotate(0deg)"; 
 
    } 
 
});

body { 
 
    font: 13pt/130% 'Linden Hill', Times, 'Times New Roman', serif; 
 
    background: #BEDFFC; 
 
    margin: 0; 
 
} 
 

 
#burger { 
 
    display: none; 
 
    color: #BEDFFC; 
 
    font-size: 2em; 
 
    line-height: 1.25em; 
 
    position: relative; 
 
    transition: all .25s; 
 
    height: 1em; 
 
    width: 1em; 
 
    left:20px; 
 
    top:10px; 
 
    transform: rotate(45deg); 
 
} 
 

 
nav { 
 
    width: 100%; 
 
    margin: 0 auto; 
 
} 
 

 
nav ul { 
 
    list-style: none; 
 
} 
 

 
nav a { 
 
    font: .9em 'Archivo Narrow', "Helvetica Neue", sans-serif; 
 
    display: block; 
 
    float: left; 
 
    text-align:center; 
 
    text-decoration: none; 
 
    width: 12%; 
 
    margin-right: 1%; 
 
    color: rgba(122, 166, 216, 0.87); 
 
    border: 1px solid rgba(220, 247, 253, 0.55); 
 
    border-radius: 0px 10px 0px 0px; 
 
    transition: all .5s ease; 
 
} 
 

 
nav a.current, 
 
nav a:hover { 
 
    color: #dbebf7; 
 
    text-decoration: none; 
 
    background: #539fd9; 
 
} 
 

 
@media only screen and (max-width: 800px) { 
 
    nav { 
 
    background: #265980; 
 
    width: 100vw; 
 
    height: 60px; 
 
    transition: all.5s; 
 
    } 
 
    nav a { 
 
    float: none; 
 
    border-radius: 0; 
 
    background: hsla(209, 78%, 93%,.75); 
 
    width:100%; 
 
    height: 40px; 
 
    font-size: 30px; 
 
    } 
 
    
 
    #myMenu { 
 
    width: 75%; 
 
    height: 0px; 
 
    margin: 18px auto; 
 
    padding: 0; 
 
    transition: all .25s; 
 
    overflow: hidden; 
 
    } 
 
    #burger { 
 
    display: initial; 
 

 
    } 
 
    #burger:hover{ 
 
    color:white; 
 
    } 
 
}

<nav id="myNav"> 
 
    <div id="burger">&#9776;</div> 
 
     <ul id="myMenu"> 
 
     <li><a href="#" class="current">menu 1</a></li> 
 
     <li><a href="#" >menu 2</a></li> 
 
     <li><a href="#">menu 3</a></li> 
 
     <li><a href="#" title="interactive">menu 4</a></li> 
 
     <li><a href="#">menu 5</a></li> 
 
     <li><a href="#">menu 6</a></li> 
 
\t <li><a href="#">menu 7</a></li> 
 
</ul> 
 
</nav>

感谢您的回复。你的解决方案应该解决问题看，我认为它是在我在CSS中定义它时初始化的。那是因为它没有被使用，直到它被命名或访问？作为设计师，这种事情让我感到困惑。 –

答

菜单的初始高度为，计算结果为为零，但内联样式的height属性的初始值为空字符串（因为您尚未设置它）。

所以，当你测试：

if (menu.style.height==="0px"){

第一次，你打else并明确将其设置为0px。

解决此问题的最简单方法是测试并添加和删除类名称而不是直接操作内联样式。

感谢您的consise答案。这是我经常遇到的问题。那么为什么它不会设置为“0”，因为它在CSS中被定义为这样？我想它不存在，直到你问它的价值与Javascript？在这里感到困惑... –

@jamesBurns - 因为style。*属性映射到* inline style *（即style属性）而不是计算的样式。 – Quentin

这是有道理的。谢谢。 –

需要2次点击才能激活按钮

相关推荐