汉堡按钮必须点击两次以展开

Question

我有一个滚动的单页网站，有一些问题。汉堡菜单必须点击两次才能展开。我不是很熟悉javascript，但想知道是否可以将某些东西添加到我现有的javascript中来解决问题。

\t $(document).ready(function() { 
 
\t \t $('a').click(function() { 
 
\t \t \t $('#menu').slideToggle(); 
 
\t \t }); 
 
\t $('#show-menu').change(function() { 
 
\t \t if(this.checked) 
 
\t \t \t $('#menu').slideDown(); 
 
\t \t else 
 
\t \t \t $('#menu').slideUp(); 
 
\t \t }); 
 
\t }); \t \t

@media screen and (max-width: 780px) { 
 

 
\t nav { 
 
\t \t width: 100%; 
 
\t \t margin: 0; 
 
\t \t padding: 0; 
 
\t \t position: relative; 
 
\t \t left: 0; 
 
\t \t display: block; 
 
\t \t opacity: 1.0 !important; 
 
\t \t filter: alpha(opacity=100); /* For IE8 and earlier */ } 
 

 
\t /*Make dropdown links appear inline*/ 
 
\t nav ul { 
 
\t \t width: 100%; 
 
\t \t margin: 0 auto; 
 
\t \t padding: 0; 
 
\t \t display: none; 
 
\t \t float: none; } 
 

 
\t /*Create vertical spacing*/ 
 
\t nav ul li { 
 
\t \t font-size: 1.3em; 
 
\t \t font-weight: normal; 
 
\t \t line-height: 40px; 
 
\t \t width: 100% !important; 
 
\t \t margin: 0; 
 
\t \t padding: 0; } 
 

 
\t nav ul li:nth-of-type(1) { margin-top: 20%; } 
 

 
\t nav ul li:hover { background: #565758; } 
 
\t 
 
\t /*Style that thing pretty*/ 
 
\t nav ul li a { 
 
\t \t color: white !important; 
 
\t \t font-family: "Lato", sans-serif; 
 
\t \t border-bottom: none !important; 
 
\t \t display: inline-block; } 
 

 
\t nav ul li a.active-link { 
 
\t \t color: white !important; 
 
\t \t font-size: 1.3em; } 
 

 
\t nav ul li a:hover { 
 
\t \t color: white; 
 
\t \t width: 100%; } 
 
\t \t 
 
\t /*Display 'show menu' link*/ 
 
\t .show-menu { 
 
\t \t margin: 0 !important; 
 
\t \t padding: 1em !important; 
 
\t \t text-align: right; 
 
\t \t display: block; 
 
\t \t float: right; } 
 

 
\t /*Show menu when invisible checkbox is checked*/ 
 
\t \t input[type=checkbox]:checked ~ #menu { background-color: #747475 !important; display: block; height: 100vh; } 
 
} 
 
​

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
\t <nav> 
 
\t <label for="show-menu" class="show-menu"><img src="hamburger.png" alt="Hamburger Menu Icon" style="width: 15%;"></label> 
 
\t <input type="checkbox" id="show-menu" role="button"> 
 
\t \t <ul id="menu" class="open"> 
 
\t \t  <li><a href="#choco">HOME</a></li> 
 
\t \t  <li><a href="#about-page">ABOUT</a></li> 
 
\t \t  <li><a href="#portfolio-page">PORTFOLIO</a></li> 
 
\t \t  <li><a href="#contact.html">CONTACT</a></li> 
 
\t \t </ul> 
 
\t </nav>​

Answer 1

试试这个：

var click = document.querySelector(".menu"); 
 
var content = document.querySelector(".content"); 
 

 
click.addEventListener("click", function(){ 
 
    content.classList.toggle("toggle"); 
 
})

* { 
 
    margin: 0; 
 
} 
 
.menu { 
 
    position: absolute; 
 
    right: 0; 
 
    width: 200px; 
 
    height: 30px; 
 
    cursor: pointer; 
 
} 
 
.content { 
 
    width: 40%; 
 
    height: 100vh; 
 
    background-color: beige; 
 
    transition: .5s; 
 

 
} 
 
.toggle { 
 
    margin-left: -50%; 
 
}

<div class="menu">Click</div> 
 
<div class="content toggle"></div>

Answer 2

$(document).ready(function(){ 
var count = 0; 
$("#id").click(function() { 
count++; 
var isEven = function(someNumber) { 
return (someNumber % 2 === 0) ? true : false; 
}; 
if (isEven(count) === false) { 
alert("test1"); 
} else if (isEven(count) === true) { 
alert("test2"); 
} 
}); 
}); 

这里双击的样品，你可以使用它。

Answer 3

这是我的页面工作。如果我没有以正确的形式设置，请原谅。我将这个javascript从一个答案改编为另一个海报的问题，这个问题非常像我的。解决方案来自Joseph Marikle。

\t $(document).ready(function(){ 
 
\t \t $('a').click(function(){ 
 
\t \t }) 
 
\t $(document).ready(function(){ 
 
\t \t $('nav li a').click(function(){ 
 
\t \t \t $('#show-menu').trigger('click'); 
 
\t \t }) 
 
\t }) 
 
\t })