Hamburger-Taste muss zweimal geklickt werden, um zu erweitern

Question

Ich habe eine Scroll-Seite eine Seite, die einige Probleme hatte. Das Hamburger-Menü muss zweimal angeklickt werden, um es zu erweitern. Ich bin nicht sehr vertraut mit Javascript, aber frage mich, ob etwas zu meinem vorhandenen Javascript hinzugefügt werden kann, um das Problem zu lösen.

\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

try this:

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

hier ist die Probe von Doppelklick, können Sie es verwenden.

Answer 3

Hier ist, was für meine Seite funktionierte. Bitte entschuldigen Sie, wenn ich es nicht in der richtigen Form eingerichtet habe. Ich habe dieses Javascript von einer Antwort auf die Frage eines anderen Posters angepasst, die meiner sehr ähnlich war. Die Lösung kam von 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 })