Раскрывающееся меню JQuery, как показать дочерние элементы, когда они активны? - PullRequest
Новая
       24

Раскрывающееся меню JQuery, как показать дочерние элементы, когда они активны?

2 голосов
/ 14 февраля 2012

Я использую jquery для анимации выпадающего меню. Дочерние элементы меню отображаются при наведении курсора на этот элемент меню. Все работает, кроме одного:

Я хочу показать дочерние элементы элемента parent-menu, когда посетитель а) на текущей родительской странице, или б) на текущей дочерней странице

Я добавил классы "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>

Ответы [ 2 ]

1 голос
/ 14 февраля 2012

Проблема в том, что вы скрываете навигацию независимо от того, что через 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/

0 голосов
/ 14 февраля 2012

Добавьте эту строку внизу: 

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

это покажет родительский класс подменю, который в данный момент также скрыт, поэтому просто показ текущего элемента меню не работает.

...