Dropdown не исчезает на iPad

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() { 

аналогичным образом, touchend событие на отведении указателя мыши

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