在iPad上下拉菜单不会消失

Question

I have a simple dropdown button which shows content when user clicks or taps (on touch screens) the button. It works great but on some mobile devices (especially iPad and devices with Windows Mobile), the dropdown doesn't disappear when user touch the screen outside the dropdown.

Here's HTML:

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

Here's JavaScript:

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

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

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

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

});

• Why it doesn't work on these devices?
• What other events I should use?
• And most important: how to make the dropdown disappear properly on all devices? Cross-browser and cross-device solution would be great.

Answer 1

You can add the touchstart event to the following

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

And likewise, the touchend event on the mouseout

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