汉堡按钮必须点击两次才能展开答案

【问题标题】：Hamburger button must be clicked twice to expand汉堡按钮必须点击两次才能展开
【发布时间】：2017-02-16 00:23:11
【问题描述】：

我的滚动单页网站出现了一些问题。汉堡菜单必须点击两次才能展开。我对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>

【问题讨论】：

对我来说似乎工作正常。
点击两次是什么意思？比如双击或三部分切换？
对我也很好
谢谢大家。谢谢你，KolaCaine，但这段代码在我的页面上不起作用（可能是因为我没有把代码放在正确的地方）。遗憾的是，我缺乏 javascript 知识。 OfficialAntarctica，点击两次我的意思是用鼠标双击汉堡包图标。这就是扩展菜单所需要的，这是一个全屏菜单。

标签： javascript html css

【解决方案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>

【讨论】：

【解决方案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");
}
});
});

这里是双击的示例，你可以使用它。

【讨论】：

谢谢你，Myco Claro。下次遇到这个问题时，我会保留这个。
好的，如果它对你有帮助的话。请不要忘记点击有用的按钮 :) 谢谢！

【解决方案3】：

这对我的页面有用。如果我没有以正确的形式设置它，请原谅。我将这个 javascript 改编自另一个海报的问题的答案，这与我的问题非常相似。解决方案来自 Joseph Marikle。

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

【讨论】：