分类导航

jQuery 发布时间：2022-04-19 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了javascript – 带图像的下拉菜单(没有像jquery这样的库)，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

我正在创建一个包含图像的下拉@L_944_1@.我的目标是：

>它不能使用任何外部库(所以jquery出来了)
>它应该尽可能使用CSS优先于javascript
>它必须是跨浏览器兼容的
>该功能必须与常规html SELEct-option下拉@L_944_1@相同
>当未启用javascript时,它必须回退到常规的SELEct-options html下拉@L_944_1@

我已经基本上到了那里,这里是我的代码大致工作：

<!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').onmou@L_944_13@ut = instate_SELEct_Box;
    instate_SELEct_Box();
};
function instate_SELEct_Box(E) {
//alert('mou@L_944_13@ut');
    document.getElementById('SELEct_pretty').onmouseup = show_options;//ready for next time the Box is neded
    document.getElementById('SELEct_pretty').onmou@L_944_13@ut = 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 SELEct-option下拉@L_944_1@的工作原理.

我已经尝试实现一个锁存器和一个超时,但到目前为止,我没有取得任何成功.我目前正在测试铬.任何人都可以让它工作？

解决方法

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

我正在谈论的解决方案需要一个变量mousedown,它告诉我们是否正在点击SELEct_pretty.如果是,则option_clicked不应继续,除非mousedown为false.

当某些事件处理程序采取行动时,也会有一些更改.查看下面的代码并与原始版本进行比较.

这是您的工作下拉@L_944_1@：

<!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').onmou@L_944_13@ut = 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('mou@L_944_13@ut');
    document.getElementById('SELEct_pretty').onmousedown = SELEct_pretty_mousedown;
    document.getElementById('SELEct_pretty').onmouseup = SELEct_pretty_mouseup;
    document.getElementById('SELEct_pretty').onmou@L_944_13@ut = 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>

大佬总结

以上是大佬教程为你收集整理的javascript – 带图像的下拉菜单(没有像jquery这样的库)全部内容，希望文章能够帮你解决javascript – 带图像的下拉菜单(没有像jquery这样的库)所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。

标签：javascript jquery 下拉菜单像图像带库没有这样

上一篇: javascript – 想要在jQuery mob... 下一篇:javascript – 当第二列的第一行...

猜你在找的jQuery相关文章

javascript – window.load&$(document).ready()与jQuery版本2和3的行为不同 2022-03-30
jquery 使用html video 2019-10-09
jQuery 语法 2019-10-09
jQuery介绍 2019-10-09
jquery – 将多个表单序列化在一起？ 2019-10-09
jQuery ajax成功的匿名函数作用域 2019-10-09
jQuery – 获取元素的第二级父级 2019-10-09
jquery清除输入默认值 2019-10-09
JQuery UI：在游标位置而不是元素的中间拖放长元素 2019-10-09
jquery – 停止$.ajax在beforeSend 2019-10-09