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