我上周刚开始使用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>
这是我到目前为止的jQuery：
// For JS users,display sub menus by default
$(".requiresJS").css("display","block");
var startMenu
//hide all sub menus
$("#sub-nav ul").hide();
// check URL for about,community or kids and set startMenu with correct term
if(window.location.href.indexOf("about") != -1){startMenu = "about"}
else if(window.location.href.indexOf("community") != -1){startMenu = "community"}
else{startMenu = "kids"}
// highlight correct category tab
$("div#main-nav #" + startMenu).addClass("selected");
// show correct starting menu
$("#sub-nav ul.menu-" + startMenu).show('slide',{direction: 'right'},600).effect("bounce",{ times:1,direction:"right",distance:13 },300);
// show correct menu on mouSEOver of div
$("div#main-nav div").mouSEOver(function() {
$("#sub-nav ul").stop(true,true)
$("#sub-nav ul").hide();
var currentId = $(this).attr('id');
$("#sub-nav ul.menu-" + currentId).show();
});
$("div#main-nav div").mouSEOver(function() {
$("#sub-nav ul").stop(true,true)
$("#sub-nav ul").hide();
var currentId = $(this).attr('id');
$("#sub-nav ul.menu-" + currentId).show();
});
解决方法
我有一个类似的案例,并通过将鼠标悬停事件分成单独的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();
});
