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

Question

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

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

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

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

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

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

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

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

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

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

	/*Show menu when invisible checkbox is checked*/
		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>
	<nav>
	  <label for="show-menu" class="show-menu"><img src="hamburger.png" alt="Hamburger Menu Icon" style="width: 15%;"></label>
	  <input type="checkbox" id="show-menu" role="button">
		<ul id="menu" class="open">
		    <li><a href="#choco">HOME</a></li>
		    <li><a href="#about-page">ABOUT</a></li>
		    <li><a href="#portfolio-page">PORTFOLIO</a></li>
		    <li><a href="#contact.html">CONTACT</a></li>
		</ul>
	</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。

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;