我基本上只是想禁用mouseleave和hover,但是问题是这是一台同时支持mouseleave和hover的设备,我找不到合适的文章来对此进行解释,并且没有标准。
我看了以下链接:
Disable hover effects on mobile browsers
How to remove/ignore :hover css style on touch devices
jquery preventing hover function on touch
jQuery mouseleave for touch screen / tablets
Disable hover effects on mobile browsers
我们正在使用DNN(DotNetNuke)作为内容管理系统。我知道您可以使用令牌和DDR菜单来构建自定义菜单,但这对于我想要实现的目标来说太复杂了。
[我的简单方法是根据从我们的ERP数据库中获取的数据来构建子菜单,并在将鼠标悬停在DNN页面链接上时显示该子菜单,该链接被“禁用”并且具有与jQuery匹配的特定名称。
[在桌面设备上,一切正常。它也可以与使用Chrome的触摸和指针设备一起使用。
我在平板电脑上通过触摸和指针事件遇到Edge问题。当您点击“类别”时,将触发onmouseleave,这将导致子菜单关闭。当您点击“类别”菜单时,它将触发悬停事件。
更难的是,子菜单不是父级的直接子级,因此使用CSS选择器并不总是那么容易。当前,我将模块放置在菜单下面,以便它至少非常靠近,以便可以使用“绝对”和“相对”定位来使子菜单直接显示在链接下方。在这里,您会注意到我在一个mouseleave事件上添加了超时功能,以使某人在鼠标离开悬停事件时可以导航到子菜单。
这里是菜单的屏幕截图。它包含可以显示的子类别,但是我只想让主菜单在同时支持Touch和Point事件的设备上正确显示。
JSFidle示例代码
JSFidle:
https://jsfiddle.net/Tig7r/e6k9cfj1/13/HTML
<nav class="NavMenu"> <ul class="ul_menu"> <li class='item'><a href="#"><span>Home</span></a></li> <li class='item'><a><span>Categories</span></a></li> </ul> </nav> <div class="subLevel MegaMenuDiv" id="MegaMenuDiv"> <div class="custom_megamenu_wrapper"> <ul class="main-category-list has-children"><li><a href="javascript:void(0)" class="Parent_Mega_Menu_Categories MegaMenuLinkMainWithChildren" style="">Accessories</a> <ul class="secondary-items"> <li><a href="https://www.google.com" class="MegaMenu_Child_Link" style="">Accessory Holders</a></li> <li><a href="https://www.google.com" class="MegaMenu_Child_Link" style="">Whiteboard Starter Pack</a></li> </ul></li> </ul> </div> </div>
css
.NavMenu{ width:100%; height:40px; background-color:red; color:white !important; } .NavMenu ul li{ list-style:none; display:inline-block; padding:10px; } .ul_menu li a:link{ color:white; } .ul_menu li a:hover{ color:black; } #MegaMenuDiv{ background:black; color:white; position:absolute; width:550px; display:none; min-height:300px; } .MegaMenuDiv a:link{ color:white; } .displayHiddenMenu{ display: block !important; } .main-category-list li{ list-style:none; } .secondary-items{ background: #31383e; position: absolute; top: 0; left: 150px; width: calc(80vw - 50%); height: auto; list-style: none; /* padding: 20px; */ display: none; height: 92%; overflow-y: auto; padding-top: 0px; z-index: 1000; max-width: 840px; padding-top: 13px; line-height: 2; } .secondary-items a:link, .secondary-items a:visited{ color:white !important; }
JQUERY
$(document).ready(function () {
$(".item:contains(Categories)").hover(function () {
if ($('.MegaMenuDiv').hasClass('displayHiddenMenu')) {
} else {
console.log('No class, adding class');
$('.MegaMenuDiv').addClass("displayHiddenMenu");
}
});
/* Removes the submenu when the mouse moves away from categories */
$('.item:contains(Categories)').on("mouseleave", function (event) {
if ($('.MegaMenuDiv:hover').length > 0) {
// do nothing
} else {
$('.MegaMenuDiv').removeClass("displayHiddenMenu");
}
});
$(".item:contains(Categories)").hover(function () {
if ($('.MegaMenuDiv').hasClass('displayHiddenMenu')) {
console.log('Item has class');
} else {
console.log('No class, adding class');
$('.MegaMenuDiv').addClass("displayHiddenMenu");
}
});
$(".item:contains(Categories)").on("touchstart click", function () {
if ($('.MegaMenuDiv').hasClass('displayHiddenMenu')) {
$('.MegaMenuDiv').removeClass("displayHiddenMenu");
} else {
$('.MegaMenuDiv').removeClass("displayHiddenMenu");
$('.MegaMenuDiv').addClass("displayHiddenMenu");
}
});
$('.MegaMenuDiv').on("mouseleave", function () {
console.log('Mouseleave remove class');
$('.MegaMenuDiv').removeClass("displayHiddenMenu");
});
//Code for child menu elements
$('.MegaMenuLinkMainWithChildren').hover(function () {
if ($(this).next().hasClass('displayHiddenMenu')) {
//do nothing
} else {
$('.MegaMenuLinkMainWithChildren').next().removeClass('displayHiddenMenu');
$(this).next().addClass('displayHiddenMenu');
}
});
$('.MegaMenuLinkMainWithChildren').on('touchstart click', function () {
var secondaryitems = $(this).next();
if ($(secondaryitems).hasClass('displayHiddenMenu')) {
} else {
$('.MegaMenuLinkMainWithChildren').next().not(secondaryitems).removeClass('displayHiddenMenu');
$(secondaryitems).addClass("displayHiddenMenu");
}
});
});
我在同时支持Pointer和Touch事件的设备上使用mouseleave和hover时遇到问题。这些设备包括带有鼠标和触摸屏的笔记本电脑。我基本上只是想禁用...
他是解决此问题的更好方法。我听了clicks
mouseevents
和touchevents
。因此希望可以在任何设备上工作。但是我没有在Edge上进行测试。希望对您有所帮助。