删除双击下拉菜单 link

Question

我对 javascript 不是很了解。但是我需要一个纯 javascript 的垂直菜单下拉菜单，所以我 copied/paste 来自 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>

Codepen

Answer 1

问题是，在您的 .drop-button 元素上，您有一个内联 onClick() attribute/event，并且在处理函数（函数 myButton()）中声明了另一个 eventListener最重要的是。

您应该一起删除 onclick="myButton()" 属性，然后您的 JavaScript 将如下所示：

(运行代码段)

在 JavaScript 中有几种不同的方法来声明事件侦听器。一种方法是 Inline/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>

删除双击下拉菜单 link

Remove double-click on dropdown link

html

javascript

css

menu

drop-down-menu