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事件将下拉列表的状态设置为打开来解决此问题，这样，如果点击事件将其“重新打开”，则没问题。但是，据我所知，jQuery API只有一个toggle选项；似乎不必要地限制了...

鉴于此，我们可以使用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是否必要，因为大多数浏览器也可能触发触摸式鼠标事件。但是安全胜过遗憾。

在输入焦点上打开引导程序下拉列表

1 个答案: