我正在创建一个包含图像的下拉菜单。我的目标是：
- 它不能使用任何外部库（所以 jquery 出来了）
- 它应该尽可能使用 css 而不是 javascript
- 它必须是跨浏览器兼容的
- 功能必须与常规 html 选择选项下拉菜单相同
- 当未启用 javascript 时，它必须回退到常规的选择选项 html 下拉菜单
我基本上已经到了那里，这是我拥有的大致工作的代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"/>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css">
.select_outermost_unfocus
{
background-color:red;
border: 5px solid red;
overflow: hidden;
display: none;/*initial value - will be changed with js*/
/*prevent highlighting*/
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.select_outermost_unfocus:hover
{
cursor: pointer;
}
.select_outermost_focus:hover
{
cursor: pointer;
}
.select_outermost_focus/*when the select area is clicked then cap its size*/
{
overflow-y: scroll;
overflow: -moz-scrollbars-vertical;
height: 100px;
}
.select_outermost_focus:focus .unchosen_element/*when the select area is clicked then show all options*/
{
display: inline-block;
}
.chosen_element
{
float: left;
background-color: lightblue;
white-space: nowrap;/*keep text on one line*/
clear: both;
}
.unchosen_element
{
background-color:grey;
display: none;
float: left;
white-space: nowrap;/*keep text on one line*/
clear:both;
}
#invisible_screen
{
background-color:green;
position: relative;
top:0;
left:0;
bottom:0;
right:0;
}
</style>
<script type='text/javascript'>
//global vars
selected_element_id = 'option1';//initialise
showing_options = false;
window.onload = function() {
// if(document.getElementById('no_tabindex').getAttribute('tabIndex') !== null) { //mimic safari
if(document.getElementById('select_pretty').getAttribute('tabIndex') !== null) {
document.getElementById('fallback_select').style.display = 'none';/*hide the html select element*/
document.getElementById('select_pretty').style.display = 'inline-block';/*show the js pretty select element*/
instate_select_box();
hide_options();
}
else {
alert('tabindex not supported - could be safari');
};
};
function show_options(e) {
showing_options = true;
document.getElementById('select_pretty').onmouseup = null; //kill the event until unhover
document.getElementById('select_pretty').className = 'select_outermost_focus';
document.getElementById('select_pretty').focus();/*invoke class .select_outermost_focus .unchosen_element*/
setTimeout(function() {
document.getElementById('option1').onmousedown = function() {option_clicked('option1');};
document.getElementById('option2').onmousedown = function() {option_clicked('option2');};
document.getElementById('option3').onmousedown = function() {option_clicked('option3');};
document.getElementById('option4').onmousedown = function() {option_clicked('option4');};
document.getElementById('option5').onmousedown = function() {option_clicked('option5');};
}, 500);
};
function option_clicked(option_id) {
document.getElementById(selected_element_id).className = 'unchosen_element';
selected_element_id = option_id;//save globally
document.getElementById(selected_element_id).className = 'chosen_element';
hide_options();
// document.getElementById('select_pretty').onmouseout = instate_select_box;
instate_select_box();
};
function instate_select_box(e) {
//alert('mouseout');
document.getElementById('select_pretty').onmouseup = show_options;//ready for next time the box is neded
document.getElementById('select_pretty').onmouseout = null;
};
function hide_options() {
if(!showing_options) {return;};
document.getElementById('option1').onclick = null;
document.getElementById('option2').onclick = null;
document.getElementById('option3').onclick = null;
document.getElementById('option4').onclick = null;
document.getElementById('option5').onclick = null;
document.getElementById('select_pretty').className = 'select_outermost_unfocus';
showing_options = false;
};
</script>
</head>
<body>
<div id='no_tabindex'></div>
<div id='fallback_select'>
<select>
<option>andora</option>
<option>uae</option>
<option>afghanistan</option>
<option>cook islands</option>
<option>germany</option>
</select>
</div>
<a class='select_outermost_unfocus' id='select_pretty' tabindex=0>
<div class='chosen_element' id='option1'><img src='http://www.crwflags.com/fotw/misc/wad.gif'>andora</div>
<div class='unchosen_element' id='option2'><img src='http://www.crwflags.com/fotw/misc/wae.gif'>uae</div>
<div class='unchosen_element' id='option3'><img src='http://www.crwflags.com/fotw/misc/waf.gif'>afghanistan</div>
<div class='unchosen_element' id='option4'><img src='http://www.crwflags.com/fotw/misc/wck.gif'>cook islands</div>
<div class='unchosen_element' id='option5'><img src='http://www.crwflags.com/fotw/misc/wde.gif'>germany</div>
</a>
</body>
</html>
它目前不是很漂亮，但是一旦我使功能正常工作，这将很容易修复。
我遇到的问题是，当我单击第一个选项以选择它时，它被选中但随后触发事件以再次显示所有选项。这显然不是常规 html 选择选项下拉菜单的工作方式。
我已经尝试实现一个锁存器和一个超时，但到目前为止我还没有成功实现这两个。我目前正在 chrome 上进行测试。任何人都可以让它工作吗？