下拉菜单与图像（没有像jQuery的库）

我正在创建一个下拉菜单中的图像。我的目标是：下拉菜单与图像（没有像jQuery的库）

它不能使用任何外部库（所以jQuery是出）
应该在偏好研究使用CSS的JavaScript在可能
它必须是跨浏览器兼容
功能必须是相同的常规HTML选择选项下拉菜单
必须退回到常规的选择，选择HTML下拉菜单未启用Javascript

我已经在很大程度上得到了那里，这里是代码我有一个大致的工作：

<!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选择选项下拉菜单的工作方式。

我已经尝试过实现一个闩锁，也是一个超时，但到目前为止，我还没有成功的任何一个。我目前正在测试铬。任何人都可以得到它的工作？

来源

2013-02-09 mulllhausen

我花了一段时间才弄清楚如何解决你的问题，但最终我找到了解决方案。

我在说的解决方案需要一个变量mousedown，它告诉我们select_pretty是否被点击。如果是，则option_clicked不应继续，除非为false。

当某些事件处理程序执行操作时，还有一些更改。查看下面的代码并与原始版本进行比较。

这是你的工作下拉菜单：

<!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; 
mousedown = 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').onmousedown = 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*/ 
    document.getElementById('option1').onmouseup = function() {option_clicked('option1');}; 
    document.getElementById('option2').onmouseup = function() {option_clicked('option2');}; 
    document.getElementById('option3').onmouseup = function() {option_clicked('option3');}; 
    document.getElementById('option4').onmouseup = function() {option_clicked('option4');}; 
    document.getElementById('option5').onmouseup = function() {option_clicked('option5');}; 
}; 
function option_clicked(option_id) { 
    if (mousedown) 
     return; 

    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 select_pretty_mousedown(e) 
{ 
    mousedown = true; 
    show_options(); 
}; 
function select_pretty_mouseup(e) 
{ 
    mousedown = false; 
}; 
function instate_select_box(e) { 
//alert('mouseout'); 
    document.getElementById('select_pretty').onmousedown = select_pretty_mousedown; 
    document.getElementById('select_pretty').onmouseup = select_pretty_mouseup; 
    document.getElementById('select_pretty').onmouseout = null; 
}; 
function hide_options() { 
    if(!showing_options) {return;}; 
    document.getElementById('option1').onmouseup = null; 
    document.getElementById('option2').onmouseup = null; 
    document.getElementById('option3').onmouseup = null; 
    document.getElementById('option4').onmouseup = null; 
    document.getElementById('option5').onmouseup = 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>

来源

2013-02-09 16:26:09 wassup

最优秀的！如果你喜欢，我会等到我可以使这个奖金，然后奖励你的积分？我一直在这件事上撕掉我的头发至少2天，所以你可以想像我很感激:) – mulllhausen 2013-02-10 00:27:46

@mulllhausen我很高兴我帮你。 :)如果你认为我的答案值得加分，那么 - 是的，赚一笔赏金。但如果你不这样做，我不会生你的气。 – wassup 2013-02-10 08:17:23

绝对。另外，我已经设法通过将'.select_outermost_focus'改为'.select_outermost：focus'来将一些JavaScript简化为css。 – mulllhausen 2013-02-10 12:36:09

下拉菜单与图像（没有像jQuery的库）

回答

相关问题