Здравствуйте.
Что сделано:
На сайте используется адаптивный дизайн. На экранах с маленьким разрешением экрана (телефонах) меню появляется при клике на соответствующую кнопку - выезжает с боку div, который занимает примерно 50% ширины.
При клике вне этого блока меню должно закрываться - пропадать.
Реализация:
Используется следующий скрипт:
$('.mobile-navigation-link').click(function(e) {
var $mobileNav = $('.mobile-navigation');
if ($mobileNav.css('visibility') != 'visible') {
$mobileNav.addClass('shownav');
var firstClickMobileNav = true;
$(document).bind('click.myEventNav', function(e) {
if (!firstClickMobileNav && $(e.target).closest('.mobile-navigation').length == 0) {
$mobileNav.removeClass('shownav');
$(document).unbind('click.myEventNav');
}
firstClickMobileNav = false;
});
}
e.preventDefault();
});
Проблема:
Всюду работает нормально, кроме айфонов. На афонах при клике вне блока ничего не происходит - не закрывается.
Тестировалось:
Десктопные (с минимальным размером окна): Safari, Chrome, Firefox, Opera и Tor - полёт нормальный.
Планшеты: iPad 2, iPad mini (Safari) - всё как надо.
Телефоны: SGS III (Chrome) - не подвёл, iPhone 4S iOS 7 - сломал систему, не работает...
Если пожелаете ознакомиться с конкретными условиями -
ссылка на сайт.
Буду благодарен за ответ!
С уважением,
Александр.
