使用焦点和聚焦时，下拉不能打开 [英] Dropdown not opening when using focus and focusout

问题描述

我有两个与同一个类相同的下拉菜单，我们称之为下拉菜单，然后使用jquery下拉菜单来操作：

  $（'。dropdown'）。focus（function（）{
 //提供这个下拉菜单
}）。focusout（function（）{
 //用这个下拉菜单
}）; 
  

当我在相同类的两个下拉菜单之间跳转时（下拉菜单），下拉菜单不会立即打开相反，它会得到重点，我必须再次点击才能打开它。这似乎与我在拨弄它时启用和禁用列表中的选项有关。是否有解决方法？

（我试图使用blur而不是focusout，并且发生同样的问题）

感谢！

编辑：

$ b $ p

$ b

  $（'。dropdown'）。focus（function（）{
 var selectListIndex = $（this）.attr（'selectedIndex'）; 
 $ （'.dropdown'）。each（function（）{
 $（'option：nth-​​child（'+（selectListIndex + 1）+'）'，$（this））。attr（'disabled'， '）; 
}）; 
}）。focusout（function（）{
 var selectListIndex = $（this）.attr（'selectedIndex'）; 
 $（' （'（this））。each（function（）{
 $（'option：nth-​​child（'+（selectListIndex + 1）+'）'，$（this））。 attr（'disabled'，'disabled'）; 
}）; 
}）; 
  

HTML：

 < select class =dropdown> 
< option> 1< / option> 
< option> 2< / option> 
< option> 3< / option> 
< / select> 
< select class =dropdown> 
< option> 1< / option> 
< option> 2< / option> 
< option> 3< / option> 
< / select> 
  

解决方案

试试这个

  $（'。dropdown'）。focus（function（）{
 $（'。dropdown'）。focusout（）
}） ; 
  

I have two dropdowns with same the same class let’s call it dropdown and I do this fiddle with the dropdowns with jquery:

$('.dropdown').focus(function () {
    //Fiddle with this dropdown
}).focusout(function () {
    //Fiddle with this dropdown
});

When I jump between two dropdowns with the same class (dropdown) the drop down doesn’t open immediately instead it get focus and I have to click on it again in order to open it up. It seem to have something to do with the fact that I enable and disable options in the list when I fiddle with it. Is there a workaround?

(I have tried to use blur instead of focusout and the same problem occur)

Thanks!

Edit:

jsfiddle

JS:

$('.dropdown').focus(function () {
    var selectListIndex = $(this).attr('selectedIndex');
    $('.dropdown').each(function() {
        $('option:nth-child(' + (selectListIndex + 1) + ')', $(this)).attr('disabled', '');
    });
}).focusout(function () {
    var selectListIndex = $(this).attr('selectedIndex');
    $('.dropdown').not($(this)).each(function() {
        $('option:nth-child(' + (selectListIndex + 1) + ')', $(this)).attr('disabled', 'disabled');
    });
});

HTML:

<select class="dropdown">
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>
<select class="dropdown">
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>

解决方案

try this

$('.dropdown').focus(function () {
    $('.dropdown').focusout() 
});

这篇关于使用焦点和聚焦时，下拉不能打开的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！