Question

我正在使用jQuery UI生成一个selectmenu。它在桌面上运行良好，但在试图关闭时它在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

此行为与我的网站上的行为并不完全相同。但是你会看到点击选择上方的任何地方（当它打开时）都不会关闭它。

感谢。

Answer 1

这应该有效：

Demo

$("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");
  }
});

单击外部时，iPad上的jQuery UI selectmenu无法正常关闭

1 个答案: