时间戳

首页 > 解决方案 > 删除双击下拉链接

javascript - 删除双击下拉链接

问题描述

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

并修改它以适应页面样式。这个菜单需要在多个页面上，所以它也是一个 html 包含。我让它有点工作，但你必须双击下拉菜单才能关闭它，这需要单击一下。几个星期以来，我一直在寻找解决方案，但仍然不确定我做错了什么。我不能使用 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>

密码笔

标签： javascripthtmlcssdrop-down-menumenu

解决方案

问题是在您的.drop-button元素上，您有一个内联onClick()属性/事件，并且在处理程序函数（函数 myButton()）中，您在其上声明了另一个 eventListener。

您应该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>

推荐阅读