JQuery懸停 - 帶有隱藏懸停的標籤並顯示下拉菜單（選擇輸入）的導航菜單

我有一個導航欄用於過濾搜索結果。我試圖保持事物的清潔和合理大小，所以我有一個JQuery .hover函數，它基本上隱藏了懸停時過濾器選項的標籤，並用下拉菜單替換它以從中進行選擇。JQuery懸停 - 帶有隱藏懸停的標籤並顯示下拉菜單（選擇輸入）的導航菜單

我唯一的問題是，一旦你把鼠標懸停在標籤上，然後放下菜單，如果你移動鼠標來選擇一個選項，而不是在li的邊界內顯示，它會認爲你是懸停的，然後隱藏選擇並顯示標籤。

任何想法讓懸停功能不認爲你關閉時，選擇菜單被刪除，你正試圖選擇一個選項？

$('li').hover(
    function(){ 
     $(this).children('.nav_label').hide(); 
     $(this).children('.nav_select').show(); 
    }, 
    function(){ 
     $(this).children('.nav_label').show(); 
     $(this).children('.nav_select').hide(); 
    } 
); 

<li><p> 
    <div class="nav_label">Menu Options</div> 
    <div class="nav_select" style="display:none;"> 
    <select > 
     <option value="" selected="selected">Choose an Option</option> 
     <option value="option1">option1</option> 
     <option value="option2">option2</option> 
     <option value="option3">option3</option> 
    </select> 
    </div> 
</p></li>

來源

2011-10-07 JimmyJammed

從我測試這個作品在Chrome中，而不是在IE或者FF - http://jsfiddle.net/mrtsherman/kpwJ9/ – mrtsherman

這是你的表演，但我真的發現了這個怪異的接口使用。我不喜歡它作爲最終用戶。也許只是說目前的實施還沒有完成。 – mrtsherman

所以我不認爲有一個很好的方法來做到這一點。似乎發生的事情是，在IE和FF中，懸停事件被觸發，因爲選擇下拉列表存在於li容器之外。

所以你必須做的是檢查下拉列表是否有焦點。如果是這樣，那麼不要重新隱藏選擇列表。

http://jsfiddle.net/mrtsherman/kpwJ9/3/

的：聚焦選擇是jQuery的1.6+。如果您使用的是較舊的jQuery，我將包含一個日誌語句以顯示活動元素。我相信你可以在此編碼你自己的解決方案。我稍微改變了你的html，但你應該能夠使用你現有的html結構和一些額外的jQuery來實現這一點。但我認爲它與答案無關。

$('li').hover(

function() { 
    $(this).children('.nav_label').hide(); 
    $(this).children('.nav_select').show(); 
}, function() { 
    console.log(document.activeElement.id); 
    if (!$('#myList').is(':focus')) { 
     $(this).children('.nav_label').show(); 
     $(this).children('.nav_select').hide(); 
    } 
});

來源

2011-10-07 19:53:31 mrtsherman

JQuery懸停 - 帶有隱藏懸停的標籤並顯示下拉菜單（選擇輸入）的導航菜單

回答

相關問題