javascript - 删除双击下 zipper 接

Question

我对 javascript 不太了解。但我需要一个垂直菜单上的下拉菜单，它是纯 JavaScript，所以我从 W3 复制/粘贴脚本:https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_sidenav_dropdown

并修改它以适应页面样式。该菜单需要位于多个页面上，因此它也是一个 html include。我让它有点工作，但是您必须双击下拉菜单才能将其关闭，并且这需要单击一次。我已经寻找解决方案几个星期了，但仍然不确定我做错了什么。我无法使用 jquery、bootstrap 或任何外部库，因为它没有连接到互联网。

HTML:

<div id="content"> 
<div class="topvert"> 
<div class="vertheader"> 
<span class="quicklinks">QUICK MENU LIST</span> 
</div>

<div class="vertbtn"> 
<div class="quick"> 
<a href="#">Menu Item</a>
</div>
<div class="quick"> 
<div class="drop-button active"><div onclick="myButton()">Drop down Menu Item 
</div></div>
<div class="dropdown-container" style="display: block;">
<a href="#">Menu Item</a>
</div>
</div>
</div>       
</div>   
<div class="btmvert"> 
<div class="vertheader"> 
<span class="quicklinks">2ND HALF (HEADLINE) QUICK MENU</span> 
</div>       
<div class="vertbtn">

<div class="quick"> 
<a href="#">Menu Item</a>
</div>
<div class="vertbtn"> 
<a class="backhome" href="#">Back to Home Page</a>
</div>           
</div>       
</div>   
</div>

Codepen

Answer 1

问题是在你的.drop-button上元素，你有一个内联 onClick()属性/事件，并在处理函数(函数 myButton())内声明另一个事件监听器。

您应该删除 onclick="myButton()"属性全部放在一起，然后你的 JavaScript 将如下所示:

(运行代码片段)

JavaScript 中有几种不同的方法来声明事件监听器。一种方法是内联/HTML 事件处理程序，您将其像属性一样内嵌在 HTML 元素上，即 - <div onClick="handlerFunction">但更现代、更推荐的方法是使用 addEventListener()直接来自您的 JavaScript。

var dropdown = document.querySelector(".drop-button");

dropdown.addEventListener("click", function() {
  this.classList.toggle("active");
   var dropdownContent = this.nextElementSibling;
   if (dropdownContent.style.display == "block") {
      dropdownContent.style.display = "none";
   } else {
      dropdownContent.style.display= "block";
   }
});

#content {
  margin: 1.875em 0px 0.625em 0px;
  width: auto;
  background-color: #002f6c;
  border-radius: 0.75em;
  -webkit-border-radius: 0.75em;
  -moz-border-radius: 0.75em;
  display: inline-block;
  overflow: hidden;
	top: 9.375em;
}

.quick {
    margin: 0;
    padding: 0;
    display: block;
    overflow: hidden;
    font-family: sans-serif;
}

.quick a {
    display: block;
    height: auto;
    padding-top: 0.625em;
    padding-bottom: 0.625em;
    font-family: sans-serif;
    font-size: calc(0.5vw + 0.5vh + 0.5vmin);
    text-align: center;
    text-decoration: none;
    background-color: #888B8D;
}

.quick a:hover {
    display: block;
    width: auto;
    height: auto;
    color: #002F6C;
    background-color: #FFD300;
}

.topvert {
  width: auto;
  margin: 0 auto;
  display: block;
  overflow: hidden;
}

.btmvert {
	width: auto;
  margin: 0 auto;
  display: block;
  overflow: hidden;
}

.btmverthome {
	width: auto;
  margin: 0 auto;
  display: block;
  overflow: hidden;
}

.vertheader {
	width: auto;
  padding: 2%;
  display: block;
  text-align: center;
}

.vertbtn {
	width: auto;
  cursor: pointer;
  display: block;
}

.vertbtn :hover {
  background-color: #FFD300;
  position: relative;
  display: block;
}

a.backhome {
  font-family: sans-serif;
	font-size: calc(0.5vw + 0.5vh + 0.5vmin);
	font-weight: 600;
	color: #fff;
	text-align: center;
	padding: 2%;
  box-sizing: border-box;
}

a.backhome:hover {
	color: #002f6c;
	background-color: #FFD300;
	position: relative;
	display: block;
}

.quicklinks {
  color: #fff;
  font-family: sans-serif;
  font-size: calc(0.5vw + 0.5vh + 0.5vmin);
  font-weight: 600;
}

.drop-button {
  padding-top: 0.625em;
  padding-bottom: 0.625em;
  text-decoration: none;
  font-family: sans-serif;
  font-size: calc(0.5vw + 0.5vh + 0.5vmin);
  color: #fff;
  display: block;
  border: none;
  background-color: #888B8D;
  width: 100%;
  text-align: center;
  cursor: pointer;
  outline: none;
}

/* On mouse-over */
.drop-button:hover {
  color: #002f6c;
  background-color: #FFD300;
}


.main {
  margin-left: 200px;
  font-size: 20px;
  padding: 0px 10px;
}


.active {
  background-color: #06a7e0;
  color: white;
}

.dropdown-container {
  display: none;
  background-color: #b4e4f5;
  border-bottom: solid 2px #06a7e0;
}

.dropdown-container > a {
	background-color: #50c1e9;
	border-bottom: solid 1px #06a7e0;
}

a { 
    display: block;
    position: relative;
    color: #f3f3f3;
    text-decoration: none;
  }
  
a:hover { 
    color: #fff;
    position: relative;
  }

<div id="content"> 
	<div class="topvert"> 
		<div class="vertheader"> 
			<span class="quicklinks">QUICK MENU LIST</span> 
		</div>		 
		<div class="vertbtn"> 
			<div class="quick">	
				<a href="#">Menu Item</a>
			</div>
			<div class="quick">	
				<div class="drop-button active"><div>Drop down Menu Item 
  		</div></div>
  				<div class="dropdown-container" style="display: block;">
    			<a href="#">Menu Item</a>
  				</div>
			</div>
		</div>		 
	</div>	 
	<div class="btmvert"> 
		<div class="vertheader"> 
			<span class="quicklinks">2ND HALF (HEADLINE) QUICK MENU</span> 
		</div>		 
		<div class="vertbtn">
			
			<div class="quick">	
				<a href="#">Menu Item</a>
			</div>
			<div class="vertbtn"> 
				<a class="backhome" href="#">Back to Home Page</a>
			</div>			 
		</div>		 
	</div>	 
</div>