Javascript 下拉菜单JS

根据这篇文章-

除了这个脚本之外，当您将链接悬停在“工具”上时，我试图添加这个下拉效果，但是没有成功（我希望同时保持onclick）。有人能帮我吗？我相信这很容易，但我不是JS方面的专家。花了几个小时没有找到任何解决方案：(

非常感谢你的帮助

JS:

}

CSS

HTML

工具

悬停事件可通过

鼠标指针处理

我还包括了
mouseleave
事件，该事件可用于在鼠标离开事件时执行某些操作


/*当用户单击按钮时，
在隐藏和显示下拉内容之间切换*/
函数myFunction（）{
document.getElementById（“myDropdown”）.classList.toggle（“show”）；
}
//如果用户在下拉列表之外单击，请关闭下拉列表
window.onclick=函数（事件）{
如果（！event.target.matches（'.dropbtn'））{
var dropdowns=document.getElementsByClassName（“下拉内容”）；
var i；
对于（i=0；i

。下拉列表{
位置：相对位置；
显示：内联块；
}
.下拉内容{
显示：无；
位置：绝对位置；
最小宽度：160px；
溢出：自动；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
z指数：1；
}
.下拉内容a{
颜色：黑色；
填充：12px 16px；
文字装饰：无；
显示：块；
}
button.dropbtn{
字号：700；
背景：无；
边界：无；
填充：0；
}
.下拉列表a:悬停{背景色：#ddd；}
.show{display:block；}

工具





欢迎来到SO。您是否尝试过自己编写它？如果是，请向我们展示您的代码，这将帮助我们提供解决方案。嗨，Ambrish，谢谢！：）我编辑了我的帖子。非常感谢Ambrish！但不幸的是，这个脚本（mouseenter事件）在Cargo Collection上不起作用。我想jquery文件的加载有问题。我还在努力寻找解决方案…@bigbox什么是“货物集合”？
/* When the user clicks on the button, 
toggle between hiding and showing the dropdown content */
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {
    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

 document.getElementByClassName(".dropbtn").onmouseenter = function(){
 document.getElementByClassName("dropdown-content").classList.contains("show");

  .dropdown {
  position: relative;
  display: inline-block;
 
}
.dropdown-content {
  display: none;
  position: absolute;
  min-width: 160px;
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
button.dropbtn{
 font-weight: 700;
  background:none;
  border:none;
  padding:0;
}
.dropdown a:hover {background-color: #ddd;}
.show {display: block;}

<div>
  <button onclick="myFunction()" class="dropbtn">Tools</button>
  <ul id="myDropdown" class="dropdown-content">
    <li><a href="#">Blok 1</a></li>
    <li><a href="#">Blok 1</a></li>
    <li><a href="#">Blok 1</a></li>
  </ul>
</div>