Javascript 删除双击下拉链接

我对javascript不是很了解。但是我需要一个纯javascript的垂直菜单下拉列表，所以我从W3复制/粘贴了脚本：

并将其修改为适合页面样式。这个菜单需要在多个页面上，所以它也是一个html包含。我让它有些工作，但你必须双击下拉列表，以关闭它，这需要是一个单一的点击。我已经寻找了几个星期的解决方案，但仍然不确定我做错了什么。我不能使用jquery、bootstrap或任何外部库，因为它没有连接到internet

HTML:

快速菜单列表
下拉菜单项
下半部分（标题）快速菜单

---

问题在于，在

.drop button

元素上，有一个内联的

onClick（）

属性/事件，在处理程序函数（function myButton（））中，您在其上声明了另一个eventListener

您应该一起删除

onclick=“myButton（）”

属性，然后您的JavaScript将如下所示：

（运行代码段）

JavaScript中有几种不同的方法来声明事件侦听器。一种方法是内联/HTML事件处理程序，将其作为属性内联到HTML元素上，即-

，但更现代、更推荐的方法是直接从JavaScript使用

addEventListener（）

var dropdown=document.querySelector（“.drop按钮”）；
addEventListener（“单击”，函数（）{
this.classList.toggle（“活动”）；
var dropdownContent=this.nextElementSibling；
if（dropdownContent.style.display==“块”）{
dropdownContent.style.display=“无”；
}否则{
dropdownContent.style.display=“block”；
}
});
#内容{
保证金：1.875em 0px 0.625em 0px；
宽度：自动；
背景色：#002f6c；
边界半径：0.75em；
-webkit边界半径：0.75em；
-moz边界半径：0.75em；
显示：内联块；
溢出：隐藏；
顶部：9.375em；
}
.快点{
保证金：0；
填充：0；
显示：块；
溢出：隐藏；
字体系列：无衬线；
}
.快点{
显示：块；
高度：自动；
垫面：0.625em；
垫底：0.625em；
字体系列：无衬线；
字体大小：calc（0.5vw+0.5vh+0.5vmin）；
文本对齐：居中；
文字装饰：无；
背景色：#888B8D；
}
.快速a:悬停{
显示：块；
宽度：自动；
高度：自动；
颜色：#002F6C；
背景色：#FFD300；
}
托普维特先生{
宽度：自动；
保证金：0自动；
显示：块；
溢出：隐藏；
}
btmvert先生{
宽度：自动；
保证金：0自动；
显示：块；
溢出：隐藏；
}
.btmverthome{
宽度：自动；
保证金：0自动；
显示：块；
溢出：隐藏；
}
.vertheader{
宽度：自动；
填充：2%；
显示：块；
文本对齐：居中；
}
.vertbtn{
宽度：自动；
光标：指针；
显示：块；
}
.vertbtn:悬停{
背景色：#FFD300；
位置：相对位置；
显示：块；
}
a、 家乡{
字体系列：无衬线；
字体大小：calc（0.5vw+0.5vh+0.5vmin）；
字号：600；
颜色：#fff；
文本对齐：居中；
填充：2%；
框大小：边框框；
}
a、 返乡：悬停{
颜色：#002f6c；
背景色：#FFD300；
位置：相对位置；
显示：块；
}
.快速链接{
颜色：#fff；
字体系列：无衬线；
字体大小：calc（0.5vw+0.5vh+0.5vmin）；
字号：600；
}
.下拉按钮{
垫面：0.625em；
垫底：0.625em；
文字装饰：无；
字体系列：无衬线；
字体大小：calc（0.5vw+0.5vh+0.5vmin）；
颜色：#fff；
显示：块；
边界：无；
背景色：#888B8D；
宽度：100%；
文本对齐：居中；
光标：指针；
大纲：无；
}
/*鼠标悬停*/
.下拉按钮：悬停{
颜色：#002f6c；
背景色：#FFD300；
}
梅因先生{
左边距：200px；
字体大小：20px；
填充：0px 10px；
}
.主动{
背景色：#06a7e0；
颜色：白色；
}
.下拉式容器{
显示：无；
背景色：#b4e4f5；
边框底部：实心2px#06a7e0；
}
.下拉列表容器>a{
背景色：#50c1e9；
边框底部：实心1px#06a7e0；
}
a{
显示：块；
位置：相对位置；
颜色：#F3；
文字装饰：无；
}
a:悬停{
颜色：#fff；
位置：相对位置；
}

快速菜单列表
下拉菜单项
下半部分（标题）快速菜单
请参见下面我的答案。请让我知道，它有帮助吗？它解决了你的问题吗？运行上面的代码段时效果很好，我按照建议做了-删除了onclick，将脚本更改为你的（在标记之间内联），但现在它不再下降。有什么想法吗？不，JavaScript代码片段不能在head标记中。它必须在结束标记之前位于HTML下方。否则，它可以位于中，但您需要将JavaScript包装到“DOMcontentLoaded”事件中。在这种情况下，将它放在结束标记之前的标记中更容易。或者，您可以像以前一样将JavaScript放在一个函数中，称为“myButton（）”或其他任何函数。并将其放在中的标记中，然后在开始标记上放“我将脚本放在了之前，但控制台发现了一个类型错误，无法准备属性“addEventListener”，因此它无法工作。然后我尝试将脚本再次放入添加的标记中，我们回到第一步，在“活动”添加到后，双击打开/关闭。
<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>