我要瘋了。在下拉菜單中選擇框使我的下拉菜單div消失，當我使用選擇框 - 我該如何阻止？

Question

簡單的例子在這裏：http://jsfiddle.net/ycHgg/1 在IE7,8或9中試試這個。點擊下拉div內的選擇框，然後嘗試選擇數字「3」 - 整個下拉div將消失。你如何阻止這種情況發生，並讓下拉div保持打開狀態？下面詳細的帖子。

---

首先，這似乎是這樣一個非問題，我不敢相信它甚至是一個問題。但它是這樣，我試着Google搜索。沒有發現任何直接關係，但它是一個這麼簡單的概念，我不相信答案不在那裏。

所以這裏的情況。我有一個div，這是我的下拉菜單。我有一個onmouseover和onmouseout來觸發顯示和隱藏這個div。我嘗試過顯示器和可見性，現在我正在使用'left'將其放置爲-9999px，然後返回-5px以隱藏並顯示它。所有這些工作都很好，所以我選擇使用它似乎並不重要。但是，我也有這個div內的輸入文本框。我發現如果我使用display：none來隱藏div，則將鼠標懸停在輸入文本框上會導致整個div在Chrome中突然消失。使用'左'或知名度不再導致這個問題發生，所以我堅持使用'左'

現在的問題是這樣的：我有一個選擇在這個div。當我點擊選擇框時，它很好。完善。當我將鼠標指針移動到顯示我的選擇框項目的圖層中時，整個div隨着選擇，文本框等消失。Poof突然中止，它全部消失。我需要提到的是，這個問題發生在IE中。所有的7至9版本當我試着用搜索引擎這個（「選擇框IE漏洞菜單消失」），我只是得到關於一個完全不同的問題，結果記錄在這裏：

http://www.javascriptjunkie.com/?p=5

這不是我的問題雖然。根據這個頁面，有一個廣泛的IE6錯誤使得選擇框通過任何出現在它們上面的div顯示，無論如何。根據其他消息來源，這是因爲選擇框被視爲一個窗口元素，並且無論如何都會出現在所有內容之上（但這在IE 7中已得到修復）。這個頁面告訴你如何解決這個問題。這很好，但我的問題是，選擇框是在div本身內，當你點擊選擇框使用它，然後向下移動鼠標來選擇一個項目，它會消失 - div，select，textbox和所有。它發生在IE 7至9.同樣，唯一使用的JavaScript是onmouseout和onmouseover來定位div，使其位於左側：-9999px，然後分別左側：-5px以隱藏和顯示它。這裏沒什麼特別的，但這仍然發生。

的結構相當簡單：

<a href="#" onmouseover="display('menu');" onmouseout="hide('menu');">Nav Item</a> 
<div id="menu" onmouseover="display('menu');" onmouseout="hide('menu');"> 
    <form> 
    <fieldset> 
     <label>Hello</label> 
     <select> ... </select> 
    </fieldset> 
    </form> 
    .... 
</div> 

內選擇省略號只是選擇選項項目，表格外的省略號是下拉菜單裏面的其他元素，包括各種的div和UL的的和桌子。我相信，所有人都飄了起來。我不認爲這會影響這個選擇框問題。錨點隱藏/顯示div，並且div本身也具有隱藏/顯示（如果用戶將鼠標從div內部移動到div外部，它應該隱藏）

是否有可能選擇框仍然存在一個窗口元素，並正在搞這件事？我讀到這是固定在IE 7中，但也許只適用於該博客文章中提出的情況（div顯示在select的頂部），而不是select是否在div本身內？但問題是，選擇框的使用會使整個div消失，所以這聽起來不同。然而，選擇是一個'窗口'元素讓我覺得，通過鼠標移動它，div認爲鼠標在外面，所以它向左移動：-9999px，而不是保持打開狀態，並保持在左邊：-5px。我試圖尋找其他網站，使用選擇內部的下拉菜單股利，只發現了一個例子，這真的讓我感到驚訝。如果您轉到http://www.walmart.com並將鼠標懸停在「Store Finder」上，您可以看到下拉菜單div出現，並且狀態字段爲選擇。它在那裏正常工作，但無法弄清楚他們是如何做到的。

地球上有人遇到過這個問題嗎？任何人都可以自己重新創建它，並看到我不是瘋了嗎？我非常認真地感謝他們的幫助，現在我已經連續幾天把我的頭撞到了牆上。

Answer 1

它確實聽起來像你的選擇元素上的鼠標移動div的onmouseout事件，因此將其定位在左側：-9999px。您是否嘗試將onmouseover事件添加到正確定位div的select元素（即left：-5px）？

Answer 2

以及..好像有（像往常一樣），在IE瀏覽器的一個問題......「過度」事件上的選擇並不傳播事件給父DIV ..

閱讀代碼後walmart.com ..我看到他們在選擇上添加了「點擊」事件，以防止父母消失。

我能夠複製使用MooTools的代碼，看看這個http://jsfiddle.net/xA4fp/3/

HTML

<div id="wrapper"> 
<a href="#" >Nav</a> 
<div id="menu" > 
    <form> 
     <fieldset> 
      <label>hello</label> 
      <select id="optionslist"> 
       <option>1</option> 
       <option>2</option> 
       <option>3</option> 
      </select> 
     </fieldset> 
    </form> 
    </div></div> 

JS

addBoxEvents(); 
var activeForm = false; 

$("optionslist").addEvent('click',function(E){ 
    activeForm = true; 
}); 

$("optionslist").addEvent('blur',function(E){ 
    activeForm = false; 
}); 

function addBoxEvents(){ 
    $('wrapper').addEvent('mouseout',function(E){ 
    if(!activeForm){ 
     $('menu').setStyle('visibility','hidden'); 
    } 
    }); 

    $('wrapper').addEvent('mouseover',function(E){ 
    $('menu').setStyle('visibility','visible'); 
    }); 
} 

即使你不知道的mootools，代碼很容易理解，所以你會得到主要想法..基本上我使用st在mouseout事件上吃了一個叫做「activeForm」的變量，當用戶點擊選擇或者當選擇失去焦點時，我改變了這個變量...

它可能不完美，但它是一個開始...我我在IE9上測試過它

祝你好運！