下拉菜单JS

Question

Based on this post - How to open dropdown button by clicking on text?基于这篇文章 - 如何通过单击文本打开下拉按钮？

I'm trying to add this dropdown effect when you hover the link "tools" in addition to this script but with any success (I would like to keep onclick at the same time).除了此脚本之外，当您将链接“工具”悬停时，我正尝试添加此下拉效果，但如果成功（我想同时保持 onclick）。 Someone could help me on this ?有人可以帮助我吗？ I'm sure it's quite easy but I'm very not an expert in JS sorry.我相信这很容易，但我不是 JS 专家，抱歉。 Spent some hours without finding any solution :(花了几个小时没有找到任何解决方案:(

Many thanks for the help.非常感谢您的帮助。

JS: JS：

/* 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');
      }
    }
  }
}

I tried to add this -我试图添加这个 -

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

} }

CSS CSS

  .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;}

HTML HTML

<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>

Answer 1

Hover event can be handled with mouseenter event悬停事件可以通过mouseenter事件处理

I have also included mouseleave event which can be used to do something on mouse leave event.我还包含了mouseleave事件，该事件可用于对鼠标离开事件执行某些操作。

 /* 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'); } } } } $(".dropbtn").on({ mouseenter: function () { document.getElementById("myDropdown").classList.toggle("show"); }, //mouseleave: function () { //do something on mouse pointer leave event //} });

 .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;}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <body> <div class="column-outlet"> <button onclick="myFunction()" class="dropbtn">Tools</button> <ul id="myDropdown" class="dropdown-content"> <li class="force-css"><a href="#">Blok 1</a></li> <li class="force-css"><a href="#">Blok 1</a></li> <li class="force-css"><a href="#">Blok 1</a></li> </ul> </div>

PS: This is a modified answer. PS：这是一个修改后的答案。 Credits to Uncoke for original answer at How to open dropdown button by clicking on text?感谢 Uncoke 在如何通过单击文本打开下拉按钮的原始答案？

下拉菜单JS

问题描述

1 个解决方案

解决方案1
0 2020-09-15 11:09:39

下拉菜单JS

问题描述

1 个解决方案

解决方案1 0 2020-09-15 11:09:39

解决方案1
0 2020-09-15 11:09:39