我快疯了.当我使用选择框时，下拉菜单 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在 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 以隐藏和显示它.这里没什么特别的，但这种情况还是会发生.

结构相当基本:

<表格><字段集><label>你好</label><选择>... </select></fieldset></表单>....

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

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

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

解决方案

好吧.. IE 上似乎有问题(像往常一样)... select 上的over"事件不会将事件传播到父级..

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

我能够使用 mootools 复制该代码，检查这个 http://jsfiddle.net/xA4fp/3/

HTML

<a href="#" >Nav</a><div id="菜单" ><表格><字段集><label>你好</label><select id="选项列表"><选项>1</选项><option>2</option><选项>3</选项></选择></fieldset></表单></div></div>

JS

addBoxEvents();var activeForm = false;$("optionslist").addEvent('click',function(E){activeForm = 真；});$("optionslist").addEvent('blur',function(E){activeForm = 假；});函数 addBoxEvents(){$('wrapper').addEvent('mouseout',function(E){如果(！activeForm){$('menu').setStyle('visibility','hidden');}});$('wrapper').addEvent('mouseover',function(E){$('menu').setStyle('visibility','visible');});}

即使你不知道 mootools，代码也很容易理解，所以你会明白主要思想..基本上我在 mouseout 事件上使用一个名为activeForm"的状态变量，当用户点击时我会更改该变量在选择或选择offope ...

时

它可能无法完美运行，但这是一个开始......我已经在 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屋！