jquery dropdown li不會消失

我有兩個水平下拉菜單的問題。我希望它顯示活動網頁的下拉區域。此外，我想添加一個時間延遲隱藏菜單，當用戶離開菜單意外，以便它不會消失。jquery dropdown li不會消失

我的HTML：

<ul id="mainnnav"> 
<li id='home'> 
    Home 
</li> 
<li> 
    Contact 
    <ul class="subnav"> 
     <li id = 'Adress'>Adress</li> 
     <li id = 'Telephone'>Telephone</li> 
     <li id = 'Email'>E-mail</li> 
    </ul> 
</li> 
<li> 
    Services 
    <ul class="subnav"> 
     <li id = 'Land'>Land</li> 
     <li id = 'Infrastructure'>Infrastructure</li> 
     <li id = 'Construction'>Construction</li> 
    </ul> 
</li> 
<li> 
    The company 
    <ul class="subnav"> 
     <li id = 'About'>About</li> 
     <li id = 'History'>History</li> 
     <li id = 'Media'>Media</li> 
    </ul> 
</li> 
</ul>

我的jQuery：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
<script type='text/javascript'> 
$(document).ready(function() { 
var activepage = 'infrastructure' 
var activesubli = $('li#'+ activepage); 
var activemainli = activesubli.parents('li'); 
var pagesub = activesubli.parent('.subnav'); 
var timer; 
var latest; 

$('#mainnav li').hover(function() { 
    $('ul:first',this).show(); 
    clearTimeout(timer); 
}, function() { 
    latest = $('ul:first', this); 
    timer = setTimeout(function() { 
     latest.hide(); 
        pagesub.show(); 
    }, 1000); 
}); 
}); 
</script>

問題1：所以我想達到的目標是，當一個客戶頁面 '基礎設施'，他看到了UL在服務前面，當他滾動菜單時，當客戶離開菜單時（沒有點擊菜單項），活動下拉菜單消失但再次顯示。問題在於，當客戶將鼠標懸停在其他菜單項上時，活動的下拉菜單不會消失，而會停留在後臺。

問題2：我面對的另一個問題是定時器的問題。當用戶離開菜單時，我希望菜單顯示最近一次徘徊的下拉菜單1秒，但要返回活動頁面下拉菜單。但是，當我在第二秒內再次進入下拉菜單時，它仍會消失。

有人可以指出我在這裏失蹤了什麼？

來源

2013-04-30 thenoob

我已經成立了一個jsFiddle here。您的<ul id="mainnnav">被誤稱。它應該被命名爲「mainnav」。

編輯

我剛剛更新的jsfiddle。我已經添加了代碼來隱藏所有的subnav，然後顯示當前活動的。基礎結構ID選擇器需要設置爲「基礎結構」。

來源

2013-04-30 11:59:50 wellers

啊我明白了！我拼錯了。但是，這似乎並不會導致問題，因爲我沒有硬編碼它。我更新了jsFiddle：我還添加了CSS標記。 – thenoob 2013-04-30 13:31:12

我已更新jsFiddle。懸停現在只適用於mainnav的直接子項目。我也隱藏了懸停的所有subnav，並只顯示選定的一個。我不知道這是否是你想要的修復。 – wellers 2013-04-30 14:25:26

這個工程！非常感謝你！ – thenoob 2013-05-01 15:15:30

jquery dropdown li不會消失

回答

相關問題