所以我遇到了这个Javascript菜单的问题。基本上我正在尝试更改具有特定类的元素的超级菜单下拉列表。我正在编辑一个wordpress主题的菜单，所以这是一个为菜单添加额外功能的黑客。基本上我发生了多个鼠标输入事件，但无法使其正常工作。有时它不会删除可见类。有时它会上下跳跃。我只是需要一些帮助来清理它。我有点卡住了。非常感谢帮助人员。
var serverAddress = "192.168.24.58"; // my current local host ip
$.ajax({
method: "POST",
url: "http://"+serverAddress+"/electronTestPage/process.php",
data: "action=testAjax",
success: function(data) {
alert("SUCCESS!!" + data);
},
error: function(jqXHR, exception) {
if (jqXHR.status === 0) {
alert('Not connect.\n Verify Network.');
} else if (jqXHR.status == 404) {
alert('Requested page not found. [404]');
} else if (jqXHR.status == 500) {
alert('Internal Server Error [500].');
} else if (exception === 'parsererror') {
alert('Requested JSON parse failed.');
} else if (exception === 'timeout') {
alert('Time out error.');
} else if (exception === 'abort') {
alert('Ajax request aborted.');
} else {
alert('Uncaught Error.\n' + jqXHR.responseText);
}
}
});
// Mega Menu
jQuery(function($) {
$('[data-js=js-navigation-main]').on({
mouseenter: function() {
var mega_element = 'header nav ul li';
var mega_menu_class = mega_element + '.mega_menu';
var mega_ids = [];
$(mega_menu_class).each(function(i) {
mega_ids[i] = $(this).attr('id');
});
$(mega_element).on({
mouseenter: function() {
var this_id = $(this).attr('id');
console.log('LEAVE ID');
console.log(this_id);
if ($.inArray(this_id, mega_ids) != -1) {
var hover_array_key = $.inArray(this_id, mega_ids);
var mega_menu_id_val = mega_ids[hover_array_key];
// console.log(mega_menu_id_val);
toggleMegaMenuList(mega_menu_id_val);
} else {
checkHoverElement();
}
},
mouseout: function(e) {
var this_id = $(this).attr('id');
console.log('LEAVE ID');
console.log(this_id);
if ($.inArray(this_id, mega_ids) != -1) {
var hover_array_key = $.inArray(this_id, mega_ids);
var mega_menu_id_val = mega_ids[hover_array_key];
toggleMegaMenuList(mega_menu_id_val);
} else {
checkHoverElement();
}
}
});
},
mouseleave: function(e) {
checkHoverElement();
}
});
});
function checkHoverElement() {
jQuery('[data-js=mega_menu_list]').each(function() {
if (jQuery(this).is(':visible')) {
jQuery(this).closest('[data-js=mega_menu_drop_down]').slideUp();
}
jQuery(this).removeClass('visible');
});
}
function toggleMegaMenuList(mega_id) {
var temp_list_id;
jQuery('[data-js=mega_menu_list]').each(function() {
temp_list_id = 'menu-item-' + jQuery(this).data('menu-id');
if (temp_list_id == mega_id) {
if (jQuery(this).hasClass('visible')) {
jQuery(this).closest('[data-js=mega_menu_drop_down]').stop().slideUp();
jQuery(this).removeClass('visible');
} else {
jQuery(this).closest('[data-js=mega_menu_drop_down]').stop().slideDown();
jQuery(this).addClass('visible');
}
}
});
} nav {
margin-top: 20px;
position: relative;
ul {
-webkit-box-orient: horizontal;
display: -webkit-box;
display: flex;
width: 100%;
justify-content: space-around;
align-items: flex-start;
align-content: flex-start;
margin-left: auto!important;
float: none;
margin-right: auto!important;
li {
display: block;
text-align: center;
a {
color: #ffffff!important;
opacity: 0.75!important;
transition: opacity 0.2s linear, color 0.2s linear;
padding: 20px 10px!important;
opacity: 1 !important;
margin-bottom: -1px;
color: #fff;
font-family: Raleway;
text-transform: uppercase;
font-size: 20px;
display: block;
line-height: 28px;
font-weight: 800;
&: hover {
color: $prim_color;
background: #6A7B52;
}
@media (max-width: $grid_m) {
font-size: 16px;
}
}
ul {
display: block;
background: #6A7B52;
width: 100%;
li {
width: 100%;
a {
background: none;
}
}
}
}
}
}
.mega_menu_drop_down {
width: 100%;
height: 300px;
background: #6A7B52;
color: #fff;
top: 150px;
display: none;
padding: 20px;
@include box-sizing();
&.visible {
display: block;
}
.mega_menu_list {
display: none;
color: #fff;
&.visible {
display: block;
}
h2,
h3 {
color: #fff;
}
}
}
}