小编Ant*_*kov的帖子

嗯,这就是发生的事情.

$('.js-custom-dropdown').find('.custom-dropdown-unfolded').toggle();
$('.custom-dropdown-btn, .custom-dropdown-btn-unfolded').keydown(function(event){
    if (event.keyCode === 13) {
        openDropdown($(this));
    }
}).click( function(){
    openDropdown($(this));
});

function openDropdown (element){
    element.parents('.js-custom-dropdown').find('.custom-dropdown-unfolded').toggle();
    console.log($(this))
}

当我单击下拉按钮时,openDropdown功能执行一次,但是当我选择按钮并按下回车键时,该功能被调用两次.猜猜这与链接有关,但我承认我是新手,并不完全理解jQuery设计模式.我可以cource在keydown处理程序中调用该函数两次,这将解决问题,但是..你知道:)

您能否解释一下代码有什么问题以及导致这种行为的原因？

嗯,这就是发生的事情.

我们之前都看到了这一点:只有在我们在输入文件中输入内容后,按钮才会变为活动状态并且可单击.我正在努力实现这一点.我想我要么走错了路,而且我应该以不同的方式放置我的jQuery选择器,或者这只是代码的错误.

$('textarea').bind({'keyup' : function(){
    if ($(this).val().trim().length){
        $('.send-feedback').removeClass('inactive').click(function(){
            console.log('clicked');
        });
    } else {
        $('.send-feedback').addClass('inactive').off('click');
    }
}})

基本上,我在控制台中多次看到"点击",但是如果我console.log('key pressed')在if检查之前添加,它会按照预期显示每次keydown一次.

有什么建议？

首先,我想只使用本机JavaScript来完成这项任务.

假设我要制作自定义下拉列表,HTML代码看起来就像这样.

<div class="dropdown">
  <span class="dropdown-label" style="display:block">Select a thing</span>
  <ul class="dropdownItemContainer">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
  </ul>
</div>

在CSS文件中,我有一些接近这个:

ul.dropdownItemContainer li:hover {
  background-color: #FF0000;
}

是的,确实没有丢弃行为,但实际上并不是讨论的重点.问题是我想不出一个合适的方法来为这个下拉列表启用键盘控制.所需的结果如下:我按下向下键,第一个选项突出显示; 我再次按下它,第二个选项突出显示,依此类推.

我在这一点上看到的唯一选项(刚刚开始研究JS)就是将所有ul的孩子,stick'em带到一个数组中,并且只要向下键是正确的,就可以通过JS方法为标签指定背景颜色.按下.

另一方面,我仍然有CSS中描述的用于鼠标控制的悬停行为.有一种模拟悬停的聪明方法吗？