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

});