下午好
对于 1024-1200 像素的范围，菜单不响应任何点击并且不应用菜单的效果。 这很奇怪，因为它仅适用于此视口(viewport)屏幕分辨率。
如果您访问此网站 (https://www.webpulse.com.br/menuzord/icons.html) 并使用 Google Chrome 的设备工具栏并调整视口(viewport)窗口的大小 (1024x1366px)，您将看到点击没有响应。
当我将视口(viewport)宽度设置为 800px 并将其调整为 1024px 时，它起作用了，但如果我尝试直接这样做，它就不起作用了。
我已经在 Linux Mint 上尝试过 Chrome、chromium 和 Opera，对于这个分辨率，结果是一样的。
(function($){
jQuery.fn.menuzord = function(options){
var settings;
$.extend( settings = {
showSpeed: 300,
hideSpeed: 300,
trigger: "hover",
showDelay: 0,
hideDelay: 0,
effect: "fade",
align: "left",
responsive: true,
animation: "none",
indentChildren: true,
indicatorFirstLevel: "+",
indicatorSecondLevel: "+",
scrollable: true,
scrollableMaxHeight: 400
}, options);
// variables
var menu_container = $(this);
var menu = $(menu_container).children(".menuzord-menu");
var menu_li = $(menu).find("li");
var showHideButton;
var mobileWidthBase = 991;
var bigScreenFlag = 2000; // a number greater than "mobileWidthBase"
var smallScreenFlag = 200; // a number less than "mobileWidthBase"
// dropdown/megamenu indicators
$(menu).children("li").children("a").each(function(){
if($(this).siblings(".dropdown, .megamenu").length > 0){
$(this).append("<span class='indicator'>" + settings.indicatorFirstLevel + "</span>");
}
});
$(menu).find(".dropdown").children("li").children("a").each(function(){
if($(this).siblings(".dropdown").length > 0){
$(this).append("<span class='indicator'>" + settings.indicatorSecondLevel + "</span>");
}
});
// navigation alignment
if(settings.align == "right"){
$(menu).addClass("menuzord-right");
}
// dropdown indentation (mobile mode)
if(settings.indentChildren){
$(menu).addClass("menuzord-indented");
}
// responsive behavior
if(settings.responsive){
$(menu_container).addClass("menuzord-responsive").prepend("<a href='javascript:void(0)' class='showhide'><em></em><em></em><em></em></a>");
showHideButton = $(menu_container).children(".showhide");
}
// scrollable menu
if(settings.scrollable){
if(settings.responsive){
$(menu).css("max-height", settings.scrollableMaxHeight).addClass("scrollable").append("<li class='scrollable-fix'></li>");
}
}
// shows a dropdown
function showDropdown(item){
if(settings.effect == "fade")
$(item).children(".dropdown, .megamenu").stop(true, true).delay(settings.showDelay).fadeIn(settings.showSpeed).addClass(settings.animation);
else
$(item).children(".dropdown, .megamenu").stop(true, true).delay(settings.showDelay).slideDown(settings.showSpeed).addClass(settings.animation);
}
// hides a dropdown
function hideDropdown(item){
if(settings.effect == "fade")
$(item).children(".dropdown, .megamenu").stop(true, true).delay(settings.hideDelay).fadeOut(settings.hideSpeed).removeClass(settings.animation);
else
$(item).children(".dropdown, .megamenu").stop(true, true).delay(settings.hideDelay).slideUp(settings.hideSpeed).removeClass(settings.animation);
$(item).children(".dropdown, .megamenu").find(".dropdown, .megamenu").stop(true, true).delay(settings.hideDelay).fadeOut(settings.hideSpeed);
}
// landscape mode
function landscapeMode(){
$(menu).find(".dropdown, .megamenu").hide(0);
if(navigator.userAgent.match(/Mobi/i) || window.navigator.msMaxTouchPoints > 0 || settings.trigger == "click"){
$(".menuzord-menu > li > a, .menuzord-menu ul.dropdown li a").bind("click touchstart", function(e){
e.stopPropagation();
e.preventDefault();
$(this).parent("li").siblings("li").find(".dropdown, .megamenu").stop(true, true).fadeOut(300);
if($(this).siblings(".dropdown, .megamenu").css("display") == "none"){
showDropdown($(this).parent("li"));
return false;
}
else{
hideDropdown($(this).parent("li"));
}
window.location.href = $(this).attr("href");
});
$(document).bind("click.menu touchstart.menu", function(ev){
if($(ev.target).closest(".menuzord").length == 0){
$(".menuzord-menu").find(".dropdown, .megamenu").fadeOut(300);
}
});
}
else{
$(menu_li).bind("mouseenter", function(){
showDropdown(this);
}).bind("mouseleave", function(){
hideDropdown(this);
});
}
}
// portrait mode
function portraitMode(){
$(menu).find(".dropdown, .megamenu").hide(0);
$(menu).find(".indicator").each(function(){
if($(this).parent("a").siblings(".dropdown, .megamenu").length > 0){
$(this).bind("click", function(e){
$(menu).scrollTo({top: 45, left: 0}, 600);
if($(this).parent().prop("tagName") == "A"){
e.preventDefault();
}
if($(this).parent("a").siblings(".dropdown, .megamenu").css("display") == "none"){
$(this).parent("a").siblings(".dropdown, .megamenu").delay(settings.showDelay).slideDown(settings.showSpeed);
$(this).parent("a").parent("li").siblings("li").find(".dropdown, .megamenu").slideUp(settings.hideSpeed);
}
else{
$(this).parent("a").siblings(".dropdown, .megamenu").slideUp(settings.hideSpeed);
}
});
}
});
}
// Fix the submenu on the right side
function fixSubmenuRight(){
var submenus = $(menu).children("li").children(".dropdown, .megamenu");
if($(window).innerWidth() > mobileWidthBase){
var menu_width = $(menu_container).outerWidth(true);
for(var i = 0; i < submenus.length; i++){
if($(submenus[i]).parent("li").position().left + $(submenus[i]).outerWidth() > menu_width){
$(submenus[i]).css("right", 0);
}
else{
if(menu_width == $(submenus[i]).outerWidth() || (menu_width - $(submenus[i]).outerWidth()) < 20){
$(submenus[i]).css("left", 0);
}
if($(submenus[i]).parent("li").position().left + $(submenus[i]).outerWidth() < menu_width){
$(submenus[i]).css("right", "auto");
}
}
}
}
}
// show the bar to show/hide menu items on mobile
function showMobileBar(){
$(menu).hide(0);
$(showHideButton).show(0).click(function(){
if($(menu).css("display") == "none")
$(menu).slideDown(settings.showSpeed);
else
$(menu).slideUp(settings.hideSpeed).find(".dropdown, .megamenu").hide(settings.hideSpeed);
});
}
// hide the bar to show/hide menu items on mobile
function hideMobileBar(){
$(menu).show(0);
$(showHideButton).hide(0);
}
// unbind events
function unbindEvents(){
$(menu_container).find("li, a").unbind();
$(document).unbind("click.menu touchstart.menu");
}
// Menuzord tabs
function menuTabs(){
function startTab(tab){
var TabNavs = $(tab).find(".menuzord-tabs-nav > li");
var TabContents = $(tab).find(".menuzord-tabs-content");
$(TabNavs).bind("click touchstart", function(e){
e.stopPropagation();
e.preventDefault();
$(TabNavs).removeClass("active");
$(this).addClass("active");
$(TabContents).hide(0);
$(TabContents[$(this).index()]).show(0);
});
}
if($(menu).find(".menuzord-tabs").length > 0){
var menuTabs = $(menu).find(".menuzord-tabs");
for(var i = 0; i < menuTabs.length; i++){
startTab(menuTabs[i]);
}
}
}
// return window's width
function windowWidth(){
return window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
}
// navigation start function
function startMenu(){
fixSubmenuRight();
if(windowWidth() <= mobileWidthBase && bigScreenFlag > mobileWidthBase){
unbindEvents();
if(settings.responsive){
showMobileBar();
portraitMode();
}
else{
landscapeMode();
}
}
if(windowWidth() > mobileWidthBase && smallScreenFlag <= mobileWidthBase){
unbindEvents();
hideMobileBar();
landscapeMode();
}
bigScreenFlag = windowWidth();
smallScreenFlag = windowWidth();
menuTabs();
/* IE8 fix */
if(/MSIE (\d+\.\d+);/.test(navigator.userAgent) && windowWidth() < mobileWidthBase){
var ieversion = new Number(RegExp.$1);
if(ieversion == 8){
$(showHideButton).hide(0);
$(menu).show(0);
unbindEvents();
landscapeMode();
}
}
}
startMenu();
$(window).resize(function(){
startMenu();
fixSubmenuRight();
});
}
}(jQuery));
最佳答案
早上好
在@yaya pro 的帮助下，我们找到了在某些浏览器中菜单没有响应的原因，与效果和点击有关。
只是因为浏览器提供的一些预设不能正常工作，所以要解决这个问题你只需要创建一个新的预设并正确填写信息，把drp(设备像素比)和浏览器代理。 要填写这些信息，本网站可以帮助您收集这些信息。 enter link description here
再次感谢yaya的帮助和支持。
我希望这个答案可以帮助其他开发者解决进一步的问题。
关于javascript - Web - 菜单不响应 1024-1200 范围内的点击，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57741426/