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;
    });

});

iPhone上的下拉菜单

1 个答案: