[英]jQuery dropdown menu with hover not working fine
I have created a hover dropdown menu with jQuery. 我已经使用jQuery创建了一个悬停下拉菜单。 I use
.mouseenter
, .mouseleave
events. 我使用
.mouseenter
和.mouseleave
事件。 But the problem is when I leave the hover button the content area does not hide. 但是问题是当我离开悬停按钮时,内容区域不会隐藏。
HTML 的HTML
<button data-drp-hover="mynewid">HOVER</button>
<div class="drp-content" data-drp-content="mynewid">
<span>Item 1</span>
<span>Item 1</span>
<span>Item 1</span>
<span>Item 1</span>
<span>Item 1</span>
</div>
CSS 的CSS
[data-drp-content] {
display:none;
}
.drp-show[data-drp-content] {
display: block;
}
JS JS
$("[data-drp-hover]").mouseenter(function(){
var root = $(this);
var _drp_container = $(this).attr("data-drp-hover");
var _drp_content = $('[data-drp-content="' + _drp_container + '"]');
_drp_content.addClass("drp-show");
_drp_content.siblings().removeClass("drp-show");
$(document).click(function(event){
_drp_content.removeClass("drp-show");
});
$(_drp_content).click(function(event){
event.stopPropagation();
});
$(_drp_content).mouseleave(function(){
var timer = setTimeout(function(){
_drp_content.removeClass("drp-show");
}, 1000);
$(_drp_content).mouseenter(function(){
clearTimeout(timer);
});
});
});
it does hide after a second becuase you have a timer there, remove the timer and it works fine here is a fiddle https://jsfiddle.net/5qn6pdv9/ 一秒钟后它确实隐藏了,因为您在那里有一个计时器,删除了计时器,它在这里工作得很好,这是一个小提琴https://jsfiddle.net/5qn6pdv9/
this is the updated js 这是更新的js
$("[data-drp-hover]").mouseenter(function () {
var root = $(this);
var _drp_container = $(this).attr("data-drp-hover");
var _drp_content = $('[data-drp-content="' + _drp_container + '"]');
_drp_content.addClass("drp-show");
_drp_content.siblings().removeClass("drp-show");
$(document).click(function (event) {
_drp_content.removeClass("drp-show");
});
$(_drp_content).click(function (event) {
event.stopPropagation();
});
$(_drp_content).mouseleave(function () {
_drp_content.removeClass("drp-show");
$(_drp_content).mouseenter(function () {
clearTimeout(timer);
});
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.