Sub Navigation Div скрывается - PullRequest
Новая
       21

Sub Navigation Div скрывается

1 голос
/ 28 октября 2011

У меня неприятные проблемы с навигацией, но я не могу заставить их работать. При наведении курсора на элементы <li> в главном элементе div, в соответствии с поднавигатором, отображается. Но он не будет оставаться в состоянии активного класса при наведении на них курсора. Когда выбран mainnav-li, subnav должен остаться. При выходе из субнава должен появиться начальный субнав.

Обратите внимание, что мы загружаем активный subnav после функции document.ready (определенной в другом PHP-включении).

Любая помощь высоко ценится здесь. Я заблудился: -)

Все основные элементы li-навигации находятся здесь: 

<div id="navigation-main">
    <div id="mainnav"> 
    <div class="navigation-items">
        <ul> 
        <li id="mainnav1" class="active"><a href="#" id="header">Button 1</a></li> 
        <li id="mainnav2"><a href="#">Button 2</a></li> 
        <li id="mainnav3"><a href="#">Button 3</a></li> 
        <li id="mainnav4"><a href="#">Button 4</a></li> 
        </ul> 
    </div> 
    </div> 
</div>

Подразделения: 

<div id="navigation-sub1" class="navigation-sub">navigation-sub 1  active</div> 
<div id="navigation-sub2" class="navigation-sub">navigation-sub 2 active</div> 
<div id="navigation-sub3" class="navigation-sub">navigation-sub 3 active</div> 
<div id="navigation-sub4" class="navigation-sub">navigation-sub 4 active</div>

Вот мой код ... 

$(document).ready(function() { 

    var activeId = $(".active").attr("id").replace("mainnav",""); 
    $("#navigation-sub" + activeId).show();

    $("#mainnav a").hover(function() { 
        //reset 
        $(".navigation-sub").hide(); 
        $("#mainnav .active").removeClass("active"); 

        //act 
        $(this).addClass("active") 
        var id = $(this).closest("li").attr("id").replace("mainnav",""); 
        $("#navigation-sub" + id).show();

    }); 

    $("#mainnav").mouseout(function() {
        $(".navigation-sub").hide(); 
        $("#navigation-sub" + activeId).show();
    }); 

});

1 Ответ

1 голос
/ 28 октября 2011

Вы должны переместить .navigation-sub в mainnav, чтобы скрыть его при отпускании мышью mainnav.Кроме того, вы использовали mouseout, когда я думаю, что вы имели в виду mouseleave:

http://jsfiddle.net/Q3YpU/5/

Я надеюсь, что это решит вашу проблему!

...