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

});