问题描述
我是 javascript 和 Jquery 的新手,我得到了这个代码,我通过悬停更改了 onclick,不知何故,当我悬停在菜单元素上时,子菜单处于活动状态,但是一旦我将鼠标移到菜单项上,不同的子菜单和我不能选择它 当我将鼠标悬停在菜单项时,我希望子菜单处于活动状态并且可选择
$(function() {
// enable styling for jquery
$('#mainNav').addClass('js-menu');
// close dropdown function
function closeDropdown() {
// $(this).children().find(".children").show();
$('li.dropdown.open').removeClass('open').find('> ul').hide();
$('#mainNav').css('padding-bottom','0');
}
// initialise timeout
var timeoutSession;
// mobile menu collapse
$( "#toggle-menu" ).mouSEOver(function() {
$(this).toggleClass('on');
$('#menu').slidetoggle();
});
// main menu
$('.dropdown > a').mouSEOver(function(e) {
e.preventDefault();
e.stopPropagation();
if($(this).parent().hasClass('open') === false){ // if not open
clearTimeout(timeoutSession);
var menHt = $(this).parent().find('> ul').height();
$('#menu > li').removeClass('open').find('> ul').hide();
$('#mainNav').css('padding-bottom',menHt);
$(this).parent().addClass('open').find('> ul').fadeIn();
timeoutSession = setTimeout(closeDropdown,10000);
$(document).on("mouSEOver",function() {
closeDropdown();
});
} else { // close menu
clearTimeout(timeoutSession);
$(this).parent().removeClass('open').find('> ul').hide();
$('#mainNav').css('padding-bottom','0');
}
});
});
#mainNav {
transition: padding-bottom 0.9s;
}
@media (max-width: 1300px) {
#mainNav {
padding-bottom: 0 !important;
}
}
@media all and (min-width: 1300px) {
#mainNav.js-menu #menu {
display: block !important;
}
}
#menu {
padding: 0;
list-style: none;
margin: 0;
margin-bottom: 1rem;
}
#menu li {
display: inline;
}
@media all and (min-width: 1300px) {
#menu {
font-size: 0;
}
#menu li {
display: inline-block;
font-size: 1rem;
}
}
#menu ul {
background: #fff;
display: none;
padding: 0;
text-align: center;
}
#menu > li > ul > li {
margin-bottom: 0.5rem;
}
#menu li.open ul {
display: block;
}
@media all and (min-width: 1300px) {
#menu {
position: relative;
}
#menu > li > ul {
position: absolute;
width: 100%;
}
#menu ul li {
display: block;
text-align: center;
}
}
#menu > li > a:hover,#menu > li > a.nav-path-selected {
border-bottom: none;
}
#menu ul a,#menu ul a:link,#menu ul a:visited {
color: #4C4D4E;
font-size: 0.8rem;
font-weight: 800;
}
@media all and (min-width: 1300px) {
#menu > li > ul {
-moz-columns: auto 190px;
columns: auto 190px;
}
#menu ul li {
-moz-column-break-inside: avoid;
break-inside: avoid;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="nav_item" id="mainNav">
<ul class="menu_header" id="menu">
<li class="dropdown">
<a class="nav_li" href="index.html">Menu</a>
<ul class="sub-menu">
<li>
<a class="nav_li" href="#">Submenu</a>
</li>
</ul>
</li>
</ul>
</nav>
解决方法
mouseover
函数只包含指定的元素。如果要访问下面的所有项目,则必须使用 hover
函数。如果您使用这些代码更改功能,问题将得到解决。
// main menu
$('.dropdown').hover(function(e) {
$(this).addClass('open').find('> ul').show();
},function (){
$(this).removeClass('open').find('> ul').hide();
});
如果你想让这个子菜单有动画效果,你可以为相关菜单添加一个类并给它一个效果。
// main menu
$('.dropdown').hover(function(e) {
$(this).addClass('open').find('> ul').addClass("active");
},function (){
$(this).removeClass('open').find('> ul').removeClass("active");
});
ul{
transition:all.3s ease;
opacity:0;
visibility:hidden;
}
ul.active{
opacity:1;
visibility:visible;
}