iPad 上的 jQuery UI 选择菜单在单击外部时无法正确关闭

jQuery UI selectmenu on iPad doesn't properly close when clicking outside

本文关键字:外部 单击 jQuery 上的 UI 选择 菜单 iPad      更新时间:2023-09-26

我正在使用jQuery UI来生成一个选择菜单。它在桌面上运行良好,但是在尝试关闭iPad时会出现奇怪的行为。在我正在处理的网站上,单击框/下拉列表之外的任何地方都不会关闭它,除非我单击框左侧的区域。

代码非常基本。.HTML:

<select>
    <option>Slower</option>
    <option>Slow</option>
    <option selected="selected">Medium</option>
    <option>Fast</option>
    <option>Faster</option>
</select>

Javascript:

$("select").selectmenu();

.CSS:

.ui-selectmenu-button{
    font-size:16px!important;   
    height:35px;
    background-color:#fff;
    background-image:none;
    min-width:200px;
}

我在这里创建了一个演示:https://jsfiddle.net/8fwcms5v/1

行为与我的网站上的行为不完全相同。但是您会看到单击选择上方的任意位置(当它打开时)不会关闭它。

谢谢。

这应该有效:

演示

$("select").selectmenu();
$("html").bind("click touchstart",function(e) {
  console.log(e.target.className)
  if (e.target.className === "ui-selectmenu-text" ||
    e.target.className === "ui-menu-item" || e.target.className === "ui-icon ui-icon-triangle-1-s") {
    return;
  } else {
    $("select").selectmenu("close");
  }
});