小编ali*_*ica的帖子

我上周刚开始使用jQuery编写代码,需要一些帮助来确定如何使菜单正常工作.我有3个标签,每个标签都有自己的菜单.显示页面时,会自动显示菜单和子菜单.一旦显示,用户可以将鼠标悬停在选项卡上以查看其他子菜单,当它们停止悬停时,将显示原始子菜单.

我的问题是虽然,我可以向他们展示其他标签的子菜单,我不能保持子菜单打开,以便用户点击子菜单项.其他教程展示了如何仅在子菜单嵌套在父元素中时才这样做,但我的菜单结构代码没有嵌套子菜单(这是我加入项目时代码的方式).如果用户在相应的选项卡上悬停,是否有某些方法可以保持子菜单打开？

这是我的菜单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 …