子導航div始終隱藏

我有一個討厭的導航問題，但似乎無法讓它工作。根據subnavigation顯示，當懸停在mainnav div中的<li>項目上時。但是，當它們懸停在它們上面時，它不會保持活動的類狀態。當選擇一個mainnav-li時，subnav應該停留。當離開subnav時，最初的subnav應該重新出現。子導航div始終隱藏

請注意，我們在document.ready函數（在另一個PHP包含中定義）之後加載一個活動的subnav。

任何幫助在這裏高度讚賞。我迷路了:-)

所有主要的鋰導航項目去這裏：

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

});

來源

2011-10-27 KJS

你能提供更好的HTML嗎？在你的例子中，很難看到元素之間的相互關係。 – Joey

謝謝喬伊，我改變了帖子中的HTML代碼。此外，這裏是一個在線示例： http://www.digiport.nl/tst/testnav.php – KJS

您必須將.navigation-sub轉換爲mainnav才能將其隱藏在的mouseleave上。此外，您使用鼠標移開，當我想你的意思鼠標離開：

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

我希望這能解決您的問題！

來源

2011-10-28 11:51:35 Joey

你搖滾喬伊！有時你只需要別人看看它:) – KJS

很高興我可以提供一個答案:) – Joey

子導航div始終隱藏

回答

相關問題