Question

我正在使用jquery为下拉菜单设置动画。将鼠标悬停在菜单项上时，会显示菜单项的子项。一切都有效，除了一件事：

我想在访问者时显示父菜单项的子项 a）在当前父页面上，或 b）在当前子页面上

我已经添加了类“current-menu-parent”和“current-menu-item”，但我无法弄清楚如何让它工作！我试图添加.show（）部分，但这不起作用。

有什么想法吗？

代码：

$(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()

它将显示当前也隐藏的父子菜单类，这就是为什么只显示current-menu-item不起作用。

JQuery下拉菜单，如何显示这些活动时的子项？

2 个答案: