Выпадающие меню на iPhone

Question

Итак, у меня есть несколько выпадающих меню, и я слушаю событие touchstart, чтобы показать их, но проблема в том, что я не знаю, когда их закрыть, так как у меня есть 2 выпадающих меню на странице, проблемачто ... если пользователь нажимает на выпадающее меню, и я отображаю его, а после этого нажимает на другое ..., которое отображается на.

$(document).ready(function() {
    $('nav ul li.sub-menu > a,nav ul li.sub-menu2 > a').bind( "touchstart",function(){
        $(this).parent().find('ul').toggle();
        $(this).parent().addClass('active_page');
    });
});

Любые идеи, как закрыть его, когда лучше закрытьЭто?: -

Answer 1

Решением было добавить оверлейный элемент div с абсолютной позицией.

$(document).ready(function() {

    $('nav ul li.sub-menu > a,nav ul li.sub-menu2 > a').click(function(){
        $(this).parent().find('ul').toggle();
        $('body').prepend('<div class="overlay" />');
        $('.overlay').css({'width' : $('body').css('width'), 'height' : $('body').css('height')});
        $(this).parent().addClass('active_page');

        return false;
    });


    $('.overlay').live('touchstart',function(){
        $(this).remove();
        $('.drop').each(function(){
            if($(this).find('ul').css('display') == 'block')
            {
                $(this).find('ul').toggle();
            }
        });
        //$('nav ul li.sub-menu2 > ul,nav ul li.sub-menu > ul').toggle();

        return false;
    });

});