如何在jQuery悬停菜单中保持子菜单打开?
我上周刚开始用jQuery编写代码,需要一些帮助来弄清楚如何使菜单正常工作。我有3个选项卡,每个选项卡都有自己的菜单。显示页面时,会自动显示菜单和子菜单。显示后,用户可以将鼠标悬停在选项卡上以查看其他子菜单,当它们停止悬停时,将显示最初的子菜单 我的问题是,尽管我可以向他们显示其他选项卡的子菜单,但我不能让用户打开子菜单来单击子菜单项。其他教程仅当子菜单嵌套在父元素中,但我的菜单结构代码没有嵌套子菜单时(这是我加入项目时代码的方式),才会显示如何执行此操作。如果用户悬停在相应的选项卡上,是否有方法可以保持子菜单打开 这是我的菜单HTML:如何在jQuery悬停菜单中保持子菜单打开?,jquery,menu,submenu,jquery-hover,Jquery,Menu,Submenu,Jquery Hover,我上周刚开始用jQuery编写代码,需要一些帮助来弄清楚如何使菜单正常工作。我有3个选项卡,每个选项卡都有自己的菜单。显示页面时,会自动显示菜单和子菜单。显示后,用户可以将鼠标悬停在选项卡上以查看其他子菜单,当它们停止悬停时,将显示最初的子菜单 我的问题是,尽管我可以向他们显示其他选项卡的子菜单,但我不能让用户打开子菜单来单击子菜单项。其他教程仅当子菜单嵌套在父元素中,但我的菜单结构代码没有嵌套子菜单时(这是我加入项目时代码的方式),才会显示如何执行此操作。如果用户悬停在相应的选项卡上,是否有方
<div id="navigation">
<div id="main-nav">
<div id="kids"><a href="../images/nav1.png"></a></div>
<div id="community"><a href="../images/nav2.png"></a></div>
<div id="about"><a href="../images/nav3.png"></a></div>
</div>
</div>
<div id="sub-nav">
<ul class="menu-1 requiresJS">
<li><a href="#">Item1</a></li>
<li><a href="#">Item2</a></li>
<li><a href="#">Item3</a></li>
<li><a href="#">Item4</a></li>
<li><a href="#">Item5</a></li>
<li><a href="#">Item6</a></li>
</ul>
<ul class="menu-2 requiresJS">
<li><a href="#">Item1</a></li>
<li><a href="#">Item2</a></li>
<li><a href="#">Item3</a></li>
<li><a href="#">Item4</a></li>
<li><a href="#">Item5</a></li>
<li><a href="#">Item6</a></li>
</ul>
<ul class="menu-3 requiresJS">
<li><a href="#">Item1</a></li>
<li><a href="#">Item2</a></li>
<li><a href="#">Item3</a></li>
<li><a href="#">Item4</a></li>
<li><a href="#">Item5</a></li>
<li><a href="#">Item6</a></li>
</ul>
我有一个类似的案例,通过将mouseover事件分解为单独的mouseenter和mouseleave事件来解决它。只是一个伪代码/大纲,但对于您的案例,请尝试以下方法:
$("div#main-nav div").mouseenter(function() {
// Check if sub menu is open, return if it is allready open
// (I add a 'menu_open' class to sub menu when it is opened)
// Code to hide open submenues
// Code to open selected submenu
});
然后使用mouseleave及其事件的toElement属性检查鼠标指针的位置,如果鼠标指针指向子菜单,则不执行任何操作,如果不关闭所有子菜单,则不执行任何操作。注意,您还需要在子菜单上连接mouseleave事件。大概是这样的:
$("#main-nav div").mouseleave(function (event) {
var toElem = $(event.toElement);
if (toElem.closest("div.sub-nav").id=="subnav") return; // Prob nicer way to do this...point is to check if mouse enters a submenu, and if so stay open.
// Close all open submenues, e.g.
$("#sub-nav ul").hide();
});
$("#subnav ul").mouseleave(function (event) {
var toElem = $(event.toElement);
if (toElem.closest("div.sub-nav").id=="subnav") return; // Check if entering submenu
if (toElem.closest("div#main-nav")) return; // Check if entering main menu
// Close all open submenues, e.g.
$("#sub-nav ul").hide();
});
希望这对你有所帮助。我自己刚刚解决了这个问题,所以还没有时间润色它,我相信有更好、更漂亮的方法可以做到这一点。我也遇到过类似的情况,不幸的是,我无法重新设置整个菜单的格式,以适应“正确的”父/子结构 如果您只需调用选择器中的子菜单,它将在悬停状态下保持“打开” 示例-
jQuery(document).ready(function($) {
$('#kids, .menu-1').hover(function() {
$('.menu-1').show();
}, function() {
$('.menu-1').hide();
});
$('#community, .menu-2').hover(function() {
$('.menu-2').show();
}, function() {
$('.menu-2').hide();
});
$('#about, .menu-3').hover(function() {
$('.menu-3').show();
}, function() {
$('.menu-3').hide();
});
});
有趣!我得试试这个。最后,我重新格式化了我的整个菜单,并像教程中说的那样嵌套了所有内容。这是可行的,但知道如何用另一种方式做是很好的。谢谢这是一个隐藏的宝石的答案!
jQuery(document).ready(function($) {
$('#kids, .menu-1').hover(function() {
$('.menu-1').show();
}, function() {
$('.menu-1').hide();
});
$('#community, .menu-2').hover(function() {
$('.menu-2').show();
}, function() {
$('.menu-2').hide();
});
$('#about, .menu-3').hover(function() {
$('.menu-3').show();
}, function() {
$('.menu-3').hide();
});
});