如何解决下拉菜单JS
基于此帖子-How to open dropdown button by clicking on text?
除此脚本之外,当您将链接“ tools”悬停时,我尝试添加此下拉效果,但没有成功(我希望同时保持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.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>
解决方法
悬停事件可以与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.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:这是修改后的答案。在How to open dropdown button by clicking on text?
上获得可口可乐的原始答案版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。