时间戳

首页 > 解决方案 > 下拉菜单 JS

javascript - 下拉菜单 JS

问题描述

基于这篇文章 -如何通过单击文本打开下拉按钮？

当您将链接“工具”悬停在此脚本之外但成功时，我正在尝试添加此下拉效果（我想同时保持 onclick）。有人可以帮助我吗？我敢肯定这很容易，但对不起，我不是 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');
      }
    }
  }
}

我试图添加这个 -

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

}

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

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

标签： javascripthyperlinkmenuhoverdropdown

解决方案

悬停事件可以用mouseenter事件处理

我还包含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：这是修改后的答案。在如何通过单击文本打开下拉按钮？

推荐阅读