在select元素中使用键盘和鼠标输入生成jQuery事件触发器

好了，开始吧

我试图编写一个脚本，当用户在元素中键入或单击某个元素时，会触发一个显示隐藏元素的事件。如果单击任何其他元素，则上述元素将被隐藏

我已经让脚本在用户点击方面工作得很好，但问题是如果用户使用键盘来处理表单

希望被触发以供展示的事件是这样的

$("#blselect").click(function() {
    $("#hidden").animate({
        opacity: 'show',
        width: "100%"
    }, 1500);
});

$(".unselect").click(function() {
    $("#hidden").animate({
        opacity: 'hide'
    }, 1500);
});

希望被触发以隐藏的事件就是这样

$("#blselect").click(function() {
    $("#hidden").animate({
        opacity: 'show',
        width: "100%"
    }, 1500);
});

$(".unselect").click(function() {
    $("#hidden").animate({
        opacity: 'hide'
    }, 1500);
});

这显示了一个CSS隐藏元素，当然也为视觉效果设置了动画

简言之，这是一个解决方案，当用户关注于或元素时，它可以同时覆盖键盘和鼠标输入

<li>
    <select>
        <option class="unselect" selected>Please choose an option..</option>
        <option id="blselect">John</option>
        <option class="unselect">Mike</option>
        <option class="unselect">Barry</option>
        <option class="unselect">Sally</option>
        <option class="unselect">Gertrude</option>
        <option class="unselect">Jill</option>
    </select>
</li>

<li id="hidden">
    <input type="text">
</li>

$("#blselect").click(function() {
    $("#hidden").animate({
        opacity: 'show',
        width: "100%"
    }, 1500);
});

$(".unselect").click(function() {
    $("#hidden").animate({
        opacity: 'hide'
    }, 1500);
});

希望这是足够的信息让人们开始？如果你需要更多，请告诉我

提前感谢。

看一看这个活动。这样，标记中的每个更改都会被注册。查看上的示例以了解其工作原理。

您可以使用，然后

---

我可能没有注意到这一点。但是我认为我的例子展示了一个好的实践，你应该养成使用的习惯。定义函数，使其在代码中可重用。然后将函数名传递到接受函数作为参数的jQuery方法中。这允许重复使用函数，并防止由于传递和重新定义匿名函数而导致内存泄漏。

您也可以使用.keyuphandler jQuery方法执行处理程序

function show() {

}

function hide() {

}

$("#blselect").click(hide);
$("#blselect").keyup(hide);

正如@Marnix所建议的那样，.change事件甚至可以在这里使用。否则，您可能正在处理鼠标或键盘事件，而这些事件实际上并未更改下拉列表中的值

您可能希望向添加ID，在这种情况下，代码如下所示：

var $hidden = $('#hidden');

$('#my-select-id').change(function ()
{
    var $option = $(this.options[this.selectedIndex]);
    if ($option.is('#blselect'))
    {
        $hidden.fadeIn(1500);
    }
    else if ($option.is('.unselect'))
    {
        $hidden.fadeOut(1500);
    }
});

---

是的，我查看了.change事件，但将其替换为.click事件不起作用，我现在猜测编写.change函数的方式与.click方式不同？应该注意的是，IE在发生模糊事件之前不会触发更改事件。修复方法是这样做：$'select'。单击函数{this.focus；this.blur；}@sholsinger，也可以吗？来自jQuery：对于选择框、复选框和单选按钮，事件将立即触发。你有我的参考资料吗？你是对的，它不会以同样的方式影响元素。然而，在IE&Opera中，您可能希望只有在使用tab键或enter键确认更改时才会触发。正如FF、Chrome和SafariThat所说，如果您想将元素作为目标，而不是我在尝试.focus事件时发现的唯一问题，则可以使用元素的click事件处理程序。当您将该元素作为选择器调用时，focus仅会触发。当调用其子元素时，focus不起作用。因此，我必须将blselect更改为select，然后即使您尝试单击该元素，脚本也会工作。在您编辑的评论中，我将在将来这样做。我只是尝试了您的示例。遗憾的是，.keyup事件对该元素不起作用，还有其他想法吗？完美的解决方案鲍尔先生：我希望我不是太傲慢，我在问.change事件是否有可能在更改时处理按键，而不是随后的按键和回车键？不是太傲慢，但不可能。更改事件在更改时触发，而在按下enter键之前，键盘导航不会发生这种情况。不过，这样做是有道理的。