<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/1Try 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 消失——我该如何停止?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！