Исчезновение мобильного меню при нажатии не на него (для Айфона)

[Alarr]

Уважаемое сообщество, прошу помощи. Айфон совсем замучал.
Была поставлена задача сделать меню для мобильной версии - сделал, без проблем, но, потом поставили задачу сделать так, что бы это меню исчезало при нажатии на любое место экрана. Это я тоже сделал. Но на Айфонах не работает.
Может у кого-нибудь есть готовые версии рабочие, проверенные на айфоне? Или подскажите что не так в том скрипте который я использую.

Я использовал не два разных меню, а одно и тоже, которое меняет дизайн в зависимости от ширины экрана с помощью цсс.

    $( ".header-menu" ).click(function() {
        $( this ).toggleClass( "open" );
        $( ".header-menu.open ul" ).show();
    });

 

Вот этот момент для исчезновения при нажатии в любом месте экрана. На Айфоне не пашет. На андроиде всё гуд.
    $(function(){
      $(document).click( function(event){
      if( $(event.target).closest(".header-menu").length )
        return;
      $(".header-menu.open ul").fadeOut("slow");
      $(".header-menu").removeClass('open')
      event.stopPropagation();
        });
    });

 

Плиз хэлп

[npofopr]

Возьмите бутстраповский dropdown да и всё http://behigh.github.io/bootstrap_dropdowns_enhancement/

Или что то типа http://jsfiddle.net/npofopr/4GszU/

[Alarr]

Возьмите бутстраповский dropdown да и всё http://behigh.github.io/bootstrap_dropdowns_enhancement/

Или что то типа http://jsfiddle.net/npofopr/4GszU/

Попробовал скриптик с js фидла, всё раво не работает на айфоне

Попробую бутстрэп.

[Alarr]

Оказывается даже бутстрэп не работает на айфоне в этом плане Оо
Я решил проблему с помощью добавления прозрачного слоя, который появляется за меню используя :after.
При нажатии на этот слой меню исчезает.
Спасибо за внимание

[npofopr]

Оказывается даже бутстрэп не работает на айфоне в этом плане Оо

ну да. Зачем популярному адаптивному фреймворку работать под iOS.