div sub навигации продолжает скрываться

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

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

Здесь приветствуется любая помощь. Я потерял :-)

Все основные пункты ли-навигации идут сюда:

<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();
    }); 

});

jquery hover mouseout addclass
person KJS    schedule 27.10.2011    source источник
comment
Не могли бы вы предоставить лучший HTML? Немного сложно понять, где элементы находятся по отношению друг к другу в вашем примере.   -  person Joey    schedule 28.10.2011
comment
Спасибо, Джоуи, я изменил HTML-код в сообщении. Кроме того, вот онлайн-пример: digiport.nl/tst/testnav.php.   -  person KJS    schedule 28.10.2011

Ответы (1)


arrow_upward
1
arrow_downward

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

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

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

person Joey    schedule 28.10.2011
comment
Ты качаешь Джоуи! Иногда просто нужно, чтобы кто-то еще посмотрел на это :) - person KJS; 28.10.2011
comment
Рад, что смог дать ответ :) - person Joey; 28.10.2011