iPhone에서 jquery 토글 클래스 버그

다음 코드는 #menu-button을 클릭하면 #wrap-footer이라는 메뉴를 아래로 슬라이드하여 표시합니다. 메뉴를 제외한 페이지의 아무 곳이나 클릭하면 슬라이드가 다시 올라옵니다.iPhone에서 jquery 토글 클래스 버그

메뉴가 표시되면 #menu-button에는 'menu-open'(스타일 지정에 사용됨)이라는 클래스가 추가되어 있습니다. 메뉴가 다시 숨겨지면 클래스가 제거됩니다.

주, 나는 선택기 #wrap-header, #wrap-pre-footer, 아이폰 등 #wrap-content보다는 html 또는 document이를 인식하지 못합니다을 사용했다.

$(document).ready(function(){ 
    $("#menu-button a").hide(); 
    $('#menu-button').append('Menu'); 

    $('#wrap-header,#wrap-pre-footer,#wrap-content').click(function() { 
     $('#wrap-footer').slideUp('slow'); 
     $('#menu-button').removeClass('menu-open'); 
    }); 

    $('#menu-button').click(function(event){ 
     event.stopPropagation(); 
     $('#menu-button').toggleClass('menu-open'); 
     $('#wrap-footer').slideToggle('slow'); 
    }); 

    $("#wrap-footer").click(function(e) { 
     e.stopPropagation(); 
    }); 
});

데스크톱 브라우저에서는 모든 것이 정상입니다. 그러나 아이폰에서 slideToggle은 정상적으로 작동하지만 toggleClass는 결코 클래스를 삭제하지 않습니다. 따라서 메뉴가 열려있는 경우 페이지 (#menu-button 또는 #wrap-footer 제외)를 클릭하면 메뉴가 최소화되고 클래스가 제거되지만 #menu-button을 클릭하면 클래스가 제거되지 않고 메뉴가 최소화됩니다.

감사

출처

2011-10-18 Evans

은 JS 괜찮다고 밝혀졌습니다. 진짜 문제는 CSS 호버 클래스였습니다. iPhone에서 마지막으로 클릭하는 요소는 마우스를 가져 가면 유지됩니다. css 호버 클래스 (내 모바일 사이트 버전에는 필요하지 않음)를 제거하면이 문제가 해결되었습니다.

출처

2011-10-19 16:07:32 Evans

iPhone에서 jquery 토글 클래스 버그

답변

관련 문제