我上周刚开始学习jQuery编程,需要一些帮助来解决如何使菜单正常工作的问题。我有三个选项卡,每个选项卡都有自己的菜单。当页面被显示时,菜单和子菜单会自动显示。一旦它被显示,用户可以悬停在选项卡上查看其他子菜单,并在停止悬停时显示最初的子菜单。
我的问题是,尽管我可以显示其他选项卡的子菜单,但我无法让子菜单保持打开状态,以便用户可以单击子菜单项。其他教程只展示了如何在子菜单嵌套在父元素中时实现此功能,但我的菜单结构代码没有嵌套子菜单(这是我加入项目时的代码)。是否有一种方法,如果用户悬停在相应的选项卡上,可以保持子菜单打开状态?
这是我的菜单HTML:
我的问题是,尽管我可以显示其他选项卡的子菜单,但我无法让子菜单保持打开状态,以便用户可以单击子菜单项。其他教程只展示了如何在子菜单嵌套在父元素中时实现此功能,但我的菜单结构代码没有嵌套子菜单(这是我加入项目时的代码)。是否有一种方法,如果用户悬停在相应的选项卡上,可以保持子菜单打开状态?
这是我的菜单HTML:
<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();
});