避免点击触发聚焦

我正在为我的表单的选项卡按钮功能。避免点击触发聚焦

我正在使用插件来定制我的表单的所有选择，但现在我陷入了冲突。

这是我写的使用上选择tab按钮来显示我的下拉菜单列表中的代码

$styledSelect.focus(function(e) { 
    var dropdown = $(this).next('ul'); 
    dropdown.show(); 
}); 

$styledSelect.focusout(function(e) { 
    var dropdown = $(this).next('ul'); 
    dropdown.hide(); 
});

的问题是，任何点击事件触发事件的内容，所以我真的不能选择任何选项我的选择标签，因为下拉列表首先被隐藏。

你可以看到这里的问题http://codepen.io/Mannaio/pen/tLaup

我怎样才能解决这个问题？

来源

2014-05-12 Koala7

您可以设置一个点击集中处理和再利用上是相同的逻辑。

function setFocus(e) { 
    e.stopPropagation(); 
    $('div.select-styled.active').each(function() { 
    $(this).removeClass('active').next('ul.select-options').hide(); 
    }); 
    $(this).toggleClass('active').next('ul.select-options').toggle(); 
}; 

$styledSelect.click(setFocus); 

$styledSelect.focus(setFocus);

更新CodePen：http://codepen.io/anon/pen/kcpqd

来源

2014-05-12 19:13:15

感谢您的回答，有可能还要保持专注于选择标签，一旦我点击下拉菜单？ – Koala7

http://codepen.io/anon/pen/kcpqd此更新关闭了最后一个下拉菜单后的下拉菜单 –

您的更改（添加了重点）似乎重新引入了原始错误。我已经用解决方法更新了我的答案。 –

工作过Burntforest的答案（占Tab键出来的时候不关闭的下拉菜单）：

function getFocus(e) { 
    e.stopPropagation(); 
    hideAllLists(); 
    $(this).toggleClass('active').next('ul.select-options').toggle(); 
}; 

function hideAllLists() { 
    $('div.select-styled.active').removeClass('active') 
           .next('ul.select-options').hide(); 
} 

$styledSelect.click(getFocus); 
$styledSelect.focus(getFocus); 

$(document).keydown(function(e) { 
    if (e.keyCode === 9) 
     hideAllLists(); 
});

http://codepen.io/anon/pen/BqEkz

来源

2014-05-12 18:27:06

点击功能的作品，但不与标签 – Koala7

只需编辑codepen和过去的联系，所以我可以看到它... ... – Koala7

避免点击触发聚焦

回答

相关问题