Question

我有一个简单的下拉按钮，当用户点击或点按（在触摸屏上）按钮时，该按钮会显示内容。它运行良好，但在某些移动设备（尤其是iPad和带有Windows Mobile的设备）上，当用户在下拉列表外触摸屏幕时，下拉列表不会消失。

这是HTML：

<div class="dropdown">
    <div class="dropdown-toggle">Click Me</div>
    <div class="dropdown-menu">Example contnt of the dropdown</div>
</div>

这是JavaScript：

$(document).on('mouseenter', '.dropdown', function() {

    $(this).children('.dropdown-menu').show();

}).on('mouseleave', '.dropdown', function() {

    $(this).children('.dropdown-menu').hide();

});

为什么它不能在这些设备上运行？
我应该使用哪些其他活动？
最重要的是：如何让所有设备上的下拉列表正确消失？跨浏览器和跨设备解决方案将非常棒。

Answer 1

您可以将touchstart事件添加到以下

$(document).on('mouseenter touchstart', '.dropdown', function() {

同样，mouseout上的touchend事件

}).on('mouseleave touchend', '.dropdown', function() {

下拉列表不会在iPad上消失

1 个答案: