仅在子菜单悬停上显示子菜单的子菜单 [英] Show submenu's submenu on submenu hover only

问题描述

我试图显示悬停菜单的子菜单。我已成功进入子菜单级别1.但是，当我进入子菜单级别2（即子菜单的子菜单）时，它不起作用。我只想在悬停1级子菜单时显示2级子菜单。以下是我尝试过的代码

I am trying to show the submenu on hovering the menus. I have succeeded in submenu level 1. But when I go to submenu level 2(ie, submenu of submenu) it is not working. I want to show the level 2 submenu only on hovering the level 1 submenu. Following is the code that I have tried

<ul class="nav">
    <li><a href="#">Home</a>
    </li>
    <li><a href="#">About Us</a>
        <ul class="submenu">
            <li><a href="#">Capabilities</a></li>
            <li><a href="#">Approach</a></li>
        </ul>
    </li>

    <li><a href="#">Careers</a>
        <ul class="submenu">
            <li><a href="#">Working With Us</a></li>
            <li><a href="#">Work Culture</a>
                <ul>
                    <li><a href="#">Benefits</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li><a href="#">Resources</a>
    </li>
    <li><a href="#">Contact Us</a>
    </li>
</ul>

以下是jQuery

Following is the jQuery

$('ul.submenu').hide();
$('ul.nav > li').hover(function () {
if ($(this).find('ul.submenu').length > 0) {
    $(this).find('ul.submenu').stop().slideDown('slow');
}
},function () {
    if ($(this).find('ul.submenu').length > 0) {
        $(this).find('ul.submenu').stop().slideUp('slow');
    }
});

请在这里找到小提琴： http://jsfiddle.net/Midhun28/RbY83/1/

Please find the Fiddle Here : http://jsfiddle.net/Midhun28/RbY83/1/

推荐答案

据我所知，你想滑动子菜单悬停在上面一层的列表项上

as far as i understood you want to slidedown the submenu on hovering the list item one level above

<ul class="submenu">
    <li><a href="#">Working With Us</a></li>
    <li><a href="#">Work Culture</a>
        <ul class="submenu">
            <li><a href="#">Benefits</a></li>
        </ul>
    </li>
</ul>

我将子菜单类添加到了我希望它们最初隐藏的所有元素。然后我对jQuery代码进行了一些修改，以处理所有子菜单。

i added the submenu class to all elements i want them to be initially hidden. then i made some modifications on the jquery code to work with all submenus

$('ul.submenu').hide();
$('ul.nav > li, ul.submenu > li').hover(function () {
if ($('> ul.submenu',this).length > 0) {
    $('> ul.submenu',this).stop().slideDown('slow');
}
},function () {
    if ($('> ul.submenu',this).length > 0) {
        $('> ul.submenu',this).stop().slideUp('slow');
    }
});

希望这能为你工作
请参阅 http://jsfiddle.net/U7mqM/

这篇关于仅在子菜单悬停上显示子菜单的子菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！