我快疯了。当我使用选择框时，下拉菜单中的div选择框使我的下拉菜单div消失 - 我该如何停止？ [英] I am going crazy. Select box inside a dropdown menu div makes my dropdown menu div disappear when I use the select box -- how do I stop this?

问题描述

这里的简单示例： http://jsfiddle.net/ycHgg/1
Try这在IE 7,8或9.点击下拉div里面的选择框，然后尝试选择数字3 - 整个下拉div将消失。你如何阻止这种情况发生和下拉div保持打开？以下详细的帖子。

---

首先，这似乎是一个非问题，我不敢相信它是一个问题。但它是所以我试图谷歌搜索它。发现没有什么直接相关，但它是一个简单的概念，我不能相信一个答案不在那里。

这里的情况。我有一个div，这是我的下拉菜单。我有一个onmouseover和onmouseout来触发显示和隐藏这个div。我试过显示，可见性，现在我使用左来定位它-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，选择，文本框和所有。它发生在IE 7到9.同样，使用的唯一的javascript是onmouseout和onmouseover定位div，使它在左边：-9999px然后左：-5px分别隐藏和显示它。

结构相当基本：

 < a href =＃onmouseover =display（'menu'）; onmouseout =hide（'menu'）;>导航项< / a> 
< div id =menuonmouseover =display（'menu'）; onmouseout =hide（'menu'）;> 
< form> 
< fieldset> 
< label> Hello< / label> 
< select> ...< / select> 
< / fieldset> 
< / form> 
 .... 
< / div> 
  

select中的省略号只是选择项目，表单之外的省略号是其他元素在下拉菜单中，由各种div和ul和表组成。所有浮动左，我相信。我不认为任何影响这个选择框问题。锚点隐藏/显示div，div本身也有隐藏/显示（如果用户将鼠标从div内部移动到div外部，则应隐藏）

选择框是否仍然是一个窗口元素可能是乱七八糟的？我读这是固定在IE 7，但也许只有在该博客文章（div显示在选择的顶部），而不是如果选择是在div本身内部的情况下？但问题是使用选择框使整个div消失，这听起来不同。然而，选择是一个窗口的元素让我认为通过鼠标悬停在它，div认为鼠标现在外面，所以它向左移动：-9999px，而不是保持打开，并保持在左：-5px。我试图寻找其他网站，使用下拉菜单中的选择div，只找到一个例子，这真的让我感到惊讶。如果您转到 http://www.walmart.com 并将鼠标悬停在商店搜索上，您可以看到下拉菜单div出现，状态字段为选择。

地球上有没有人经历过这个问题？任何人可以自己重新创建它，看到我不疯了？我非常认真地感谢你的帮助，我现在已经把我的头撞在墙上几天了。

解决方案

..看起来在IE上有一个问题（像往常一样）... select上的over事件不会将事件传播到父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，代码很容易理解，所以你我会得到主要的想法。基本上我使用一个状态变量称为activeForm的mouseout事件，我改变该变量，当用户点击选择或当选择失去焦点...

它可能不是完美的工作，但它是一个开始...我已经测试了它在IE9

好运！

Simple example here: http://jsfiddle.net/ycHgg/1 Try this in IE 7, 8 or 9. Click on select box inside the dropdown div and then try selecting the number "3" -- the entire dropdown div will disappear. How do you stop this from happening and have the dropdown div remain open? Detailed post below.

---

First, this seems like such a non-issue, I can't believe it is even a problem. But it is so I tried googling for it. Found nothing that relates directly but it's such a simple concept, I can't believe an answer isn't out there.

So here's the situation. I have a div and this is my dropdown menu. I have a onmouseover and onmouseout to trigger displaying and hiding this div. I have tried display, visibility, and now I'm using 'left' to position it -9999px and then back to -5px to hide and show it. All of these work fine so it doesn't appear to matter which I choose to use. However, I also have an input textbox inside this div. I found that if I used display:none to hide the div, hovering over the input textbox caused the entire div to disappear suddenly in Chrome. Using either 'left' or visibility no longer causes this problem to happen, so I've stuck with using 'left'

Now the problem is this: I have a select in this div. When I click on the select box, it's fine. Perfect. When I move my mouse pointer into the layer that shows my select box items, the whole div disappears along with the select, textbox, etc. Poof, just suddenly aborts, it all disappears. I need to mention that this problem occurs in IE. All versions from 7 to 9. When I tried googling for this ("select box IE bug menu disappears"), I just get results about a totally different issue documented here:

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

This is not my problem though. According to this page, there is a widespread IE6 bug made select boxes show through any divs that appeared above them, no matter what. According to other sources, this happens because the select box is treated like a windowed element and will appear on top of everything no matter what (but that this is fixed in IE 7). And this page tells you how to get around this. That's fine but my problem is that the select box is inside the div itself, and when you click on the select box to use it and then move your mouse down in it to select an item, it disappears - div, select, textbox, and all. And it happens on IE 7 to 9. Again, the only javascript that is used is onmouseout and onmouseover to position the div so that it is at left:-9999px and then left:-5px respectively to hide and show it. Nothing fancy here, yet this still happens.

The structure is fairly basic:

<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>

The ellipses inside the select are just the select option items, the ellipses outside of the form are the other elements inside the dropdown menu, consisting of various divs and ul's and tables. All floated left, I believe. I don't think any of that affects this select box problem though. The anchor hides/shows the div, and the div itself has the hide/show as well (if user moves mouse starting from inside div to outside the div, it should hide)

Is it possible that the select box is still a windowed element and is messing things up for this? I read this was fixed in IE 7 but maybe only for the case presented in that blog post (div is shown on top of the select) instead of if the select is inside the div itself? But the issue is that usage of the select box makes the whole div go away so this sounds different. However, the select being a 'windowed' element makes me think that by mousing over it, the div thinks the mouse is outside now so it moves left:-9999px instead of staying open and staying at left:-5px. I tried looking for other sites that use a select inside a dropdown menu div and only found one example, which really surprised me. If you go to http://www.walmart.com and hover over "Store Finder", you can see the dropdown menu div appear and the State field is a select. It works fine there but can't figure out how they do it.

Has anyone on earth experienced this problem? Can anyone recreate it themselves and see that I'm not crazy? I seriously seriously appreciate the help, I've been banging my head against the wall for a couple days straight now.

解决方案

well.. it seems that there's a problem on IE (as usual)... the "over" event on the select does not propagate the event to the parent div..

After reading the code on walmart.com.. i saw that they add a "click" event on the select to prevent the parent from disappearing.

I was able to replicate that code using mootools, check this 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');
  });
}

even if you dont know mootools, the code is easy to understand, so you'll get the main idea.. basically i use a state variable called "activeForm" on the mouseout event and i change that variable when the user clicks on the select or when the select looses focus...

it might not be working perfectly, but it's a start... i've tested it on IE9

Good Luck!

这篇关于我快疯了。当我使用选择框时，下拉菜单中的div选择框使我的下拉菜单div消失 - 我该如何停止？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！