html - 在悬停时激活菜单子项
问题描述
我是javascript和Jquery的新手,我得到了这个代码,我通过悬停更改了onclick,当我悬停菜单元素时,子菜单处于活动状态,但是一旦我将鼠标移到菜单项上,dispariat子菜单,我无法选择当我悬停菜单项时,我希望子菜单处于活动状态且可选择
$(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;
}
推荐阅读
- ios - 在为 IOS 发布之前如何查看我的应用页面?
- google-maps - 找不到离子谷歌服务
- java - Java 高 CPU 线程 | JBOSS EAP 6.3 | 无法找到根本原因
- db2 - 将消息从 DB2 发布到 Mq web sphere
- java - 使用 Java 的 Optional 进行 Spring 注入
- laravel - 从位于数组中的字符串获取集合结果
- python - 如何从 Facebook 画布图中提取数据?
- python - 如何在带有空格的单词之后获取序列
- .net - 对 COM 应用程序 (Primavera ERP) 的 Web 服务的并发调用
- lua - 将 2 个 Lua Logitech 脚本合二为一