我要疯了。在下拉菜单中选择框使我的下拉菜单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上测试过它

祝你好运！