在输入焦点上打开 bootstrap 下拉菜单

Question

我有一个输入，当点击它时会显示一个 bootstrap 4 下拉菜单，但我需要它在用户点击它时打开它以及 ADA 可访问性。

如果我使用一个使用 $('#input-name).dropdown('toggle') 的焦点事件，它工作正常，但是当输入被点击时，焦点首先触发，它打开下拉菜单，然后是单击事件将其关闭。

我试过了e.preventDefault(); e.stopPropagation();但都没有帮助解决这个问题。

events: {
  focus #healthPlanMenu": "openDropDown"
}


openDropDown: function (e) {

  if ($('#healthPlanMenu').find('.dropdown-menu:no(.show)')){
    $("#healthPlanMenu.dropdown-toggle").dropdown('toggle');
   }//fails

    $("#healthPlanMenu.dropdown-toggle").dropdown('toggle');//fails
    $( "#healthPlanMenu" ).click();//fails

  }

Answer 1

所以理想情况下，您可能会通过让 focus 事件将下拉菜单的状态设置为打开来解决此问题，这样如果它通过点击事件获得 "reopened"，没问题。但是，据我所知只有 toggle 选项和 jQuery API;似乎不必要地限制...

鉴于此，我们可以通过使用 mousedown 知道在我们的焦点事件之后是否有点击。所以解决这个问题的一个有点老套的方法是在我们知道点击即将到来时禁用我们的焦点事件。

(function() {
 var disable = false;
 $('#healthPlanMenu.dropdown-toggle')
  .on('mousedown touchstart', function() {
   disable = true;
  })
  .on('focus', function() {
   if (!disable) {
    $(this).dropdown('toggle');
   }
  })
  .on('mouseup touchend',function() {
   disable = false;
  })
})()

我不知道 touchstart 和 touchend 是否有必要，因为大多数浏览器也可能在触摸时触发鼠标事件。但安全总比后悔好。

在输入焦点上打开 bootstrap 下拉菜单

Open bootstrap dropdown on input focus

javascript

jquery

backbone.js

backbone-views

bootstrap-4