我快疯了。当我使用选择框时，下拉菜单 div 中的选择框使我的下拉菜单 div 消失 - 我该如何停止？

Question

这里的简单示例：http://jsfiddle.net/ycHgg/1 在 IE 7、8 或 9 中尝试此操作。单击下拉 div 内的选择框，然后尝试选择数字“3”——整个下拉 div 将消失。你如何阻止这种情况发生并让下拉 div 保持打开状态？详细帖子如下。

---

首先，这似乎不是一个问题，我不敢相信它甚至是一个问题。但它是所以我试着用谷歌搜索它。没有找到任何直接相关的东西，但这是一个如此简单的概念，我不敢相信没有答案。

所以情况就是这样。我有一个 div，这是我的下拉菜单。我有一个 onmouseover 和 onmouseout 来触发显示和隐藏这个 div。我尝试了显示、可见性，现在我使用“左”将其定位 -9999px，然后返回 -5px 以隐藏和显示它。所有这些工作都很好，所以我选择使用哪个似乎并不重要。但是，我在这个 div 中也有一个输入文本框。我发现如果我使用 display:none 隐藏 div，将鼠标悬停在输入文本框上会导致整个 div 在 Chrome 中突然消失。使用“左”或可见性不再导致此问题发生，所以我坚持使用“左”

现在的问题是：我在这个 div 中有一个选择。当我单击选择框时，它很好。完美的。当我将鼠标指针移动到显示我的选择框项目的层时，整个 div 连同选择、文本框等一起消失。噗，突然中止，一切都消失了。我需要提一下，这个问题发生在 IE 中。从 7 到 9 的所有版本。当我尝试对此进行谷歌搜索时（“选择框 IE 错误菜单消失”），我得到的结果是关于此处记录的一个完全不同的问题：

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

不过，这不是我的问题。根据这个页面，有一个广泛存在的 IE6 错误使选择框通过出现在它们上方的任何 div 显示，无论如何。根据其他消息来源，这是因为选择框被视为窗口元素，无论如何都会出现在所有内容之上（但这在 IE 7 中已修复）。这个页面告诉你如何解决这个问题。没关系，但我的问题是选择框位于 div 本身内部，当您单击选择框以使用它，然后在其中向下移动鼠标以选择一个项目时，它会消失 - div、选择、文本框和全部。它发生在 IE 7 到 9 上。同样，唯一使用的 javascript 是 onmouseout 和 onmouseover 来定位 div，使其分别位于 left:-9999px 和 left:-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>

select里面的省略号只是select选项项，form外面的省略号是下拉菜单里面的其他元素，由各种div和ul以及表格组成。我相信所有的东西都向左飘了。不过，我认为这些都不会影响此选择框问题。锚点隐藏/显示 div，并且 div 本身也具有隐藏/显示（如果用户将鼠标从 div 内部移动到 div 外部，它应该隐藏）

是否有可能选择框仍然是一个窗口元素并且为此搞砸了？我读到这在 IE 7 中已修复，但可能仅适用于该博客文章中介绍的情况（div 显示在选择的顶部）而不是选择是否在 div 本身内？但问题是选择框的使用会使整个 div 消失，所以这听起来不同。但是，选择是一个“窗口”元素让我认为通过将鼠标悬停在它上面，div 认为鼠标现在在外面，所以它向左移动：-9999px，而不是保持打开并停留在左侧：-5px。我尝试寻找在下拉菜单 div 中使用 select 的其他网站，但只找到了一个示例，这让我感到非常惊讶。如果您转到http://www.walmart.com 并将鼠标悬停在“Store Finder”上，您可以看到下拉菜单 div 出现并且 State 字段是一个选择项。它在那里工作正常，但无法弄清楚他们是如何做到的。

世界上有没有人遇到过这个问题？任何人都可以自己重新创建它并看到我没有疯吗？我真的非常感谢您的帮助，我已经连续几天把头撞在墙上了。

Answer 1

嗯.. IE 上似乎有问题（像往常一样）...... select 上的“over”事件不会将事件传播到父 div..

阅读 walmart.com 上的代码后，我看到他们在 select 上添加了一个“点击”事件，以防止父级消失。

我能够使用 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，代码也很容易理解，所以你会明白主要思想。基本上我在 mouseout 事件中使用一个名为“activeForm”的状态变量，当用户点击时我会更改该变量在选择或选择offope ...

时

它可能无法完美运行，但它是一个开始......我已经在 IE9 上测试过它

祝你好运！

Answer 2

听起来确实像将鼠标悬停在您的选择元素上会触发 div 的 onmouseout 事件，因此将其定位到左侧：-9999px。您是否尝试将 onmouseover 事件添加到正确定位 div 的选择元素（即 left:-5px）？