JQuery下拉菜单，如何在这些项目处于活动状态时显示子项目？

Question

我正在使用jquery来制作下拉菜单的动画。将鼠标悬停在菜单项上时，会显示该菜单项的子项。一切正常，除了一件事：

当访问者是a)在当前父页面上，或者b)在当前子页面上时，我希望显示父菜单项的子项

我添加了"current-menu-parent“和"current-menu-item”两个类，但我不知道如何让它工作！我尝试添加一个.show()部件，但没有成功。

你有什么想法吗？

jsfiddle：http://jsfiddle.net/ub24N/

代码：

$(function(){
    $('#menu-navigatie>li>ul').hide();
    $('#menu-navigatie>li').mouseover(function(){
        // check that the menu is not currently animated
        if ($('#menu-navigatie ul:animated').size() == 0) {
            // create a reference to the active element (this)
            // so we don't have to keep creating a jQuery object
            $heading = $(this);
            // create a reference to visible sibling elements
            // so we don't have to keep creating a jQuery object
            $expandedSiblings = $heading.siblings().find('ul:visible');
            if ($expandedSiblings.size() > 0) {
                $expandedSiblings.slideUp(500, function(){
                    $heading.find('ul').slideDown(500);
                });
            }
            else {
                $heading.find('ul').slideDown(1000);
            }
        }
    });
});

和html：

<ul id="menu-navigatie" class="menu">
    <li>
        <a href="#">Item 1</a>
    </li>
    <li class="current-menu-parent">
        <a href="#">Item 2</a>

            <ul class="sub-menu">
                <li class="current-menu-item">
                    <a href="#">Item 2a</a>
                </li>
                <li>
                    <a href="#">Item 2b</a>
                </li>
            </ul>
    </li>
</ul>    

Answer 1

问题是，无论通过jQuery，你都会隐藏导航。如果您希望jQuery显示子导航，您可以在包含以下内容的子导航元素上检查类：

$('#menu-navigatie>li>ul').each(function(){
    if($(this).parent().hasClass("current-menu-parent")) 
    { 
        $(this).show();
    } else {
        $(this).hide(); 
    }
});

请参阅此小提琴以快速演示：

http://jsfiddle.net/jimjeffers/ub24N/1/

更新：

如果不希望当前菜单因另一个子菜单而隐藏，则在搜索标题同级时必须忽略当前菜单：

$expandedSiblings = $heading.siblings().not(".current-menu-parent").find('ul:visible');

在鼠标输出时，您还需要检查类：

else {
   if(!$heading.parent().hasClass("current-menu-parent")) {
     $heading.find('ul').slideDown(1000);
   }
}

看看这个小提琴：http://jsfiddle.net/jimjeffers/ub24N/3/

Answer 2

在底部添加以下行：

$('.current-menu-item').parent('.sub-menu').show()

它将显示当前隐藏的父子菜单类，这就是为什么只显示当前菜单项不起作用的原因。