Question

这是一个简单的要求，我无法使其发挥作用。

我只是想通过使用箭头键来导航。我也想检测何时在LI上按下箭头键。但是我无法用箭头导航 - 我的keydown事件也不会触发。

       <script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $("li,a").keydown(function () {
                    alert("kd");
                });
            });
        </script>
    </head>
    <body>



<div>
        <input type="text" />
        <ul id="sbOptions_54514054" class="sbOptions" style="">
            <li><a href="#-1" rel="-1">--Select one--</a></li>
            <li><a href="#2" rel="2">Windows</a></li>
            <li><a href="#1" rel="1">Siding</a></li>
            <li><a href="#7" rel="7">Roofing</a></li>
        </ul>
    </div>

Answer 1

这样的事情怎么样 jsFiddle ？

基本上它维护一个简单的索引，该索引当前选择了哪个列表项。向上和向下箭头键绑定到keydown事件，如果有人按下列表顶部的向上箭头，则顶部项目保持选中状态，反之亦然。

var chosen = "";
$(document).keydown(function(e){ // 38-up, 40-down
    if (e.keyCode == 40) { 
        if(chosen === "") {
            chosen = 0;
        } else if((chosen+1) < $('li').length) {
            chosen++; 
        }
        $('li').removeClass('selected');
        $('li:eq('+chosen+')').addClass('selected');
        return false;
    }
    if (e.keyCode == 38) { 
        if(chosen === "") {
            chosen = 0;
        } else if(chosen > 0) {
            chosen--;            
        }
        $('li').removeClass('selected');
        $('li:eq('+chosen+')').addClass('selected');
        return false;
    }
});

HTML JQUERY在UL / LI上实现ARROW DOWN

1 个答案: