2014-08-28 2 views
1

내 웹 사이트의 사이드 메뉴로 sidr을 사용하고 있습니다. 하지만 내 휴대 전화에서 크롬 브라우저로 열면 버튼을 클릭하면 열립니다. 버튼을 다시 클릭해도 닫히지 않습니다. 돌고래 브라우저를 사용하면 정상적으로 작동합니다.Chrome 모바일에서 sidr 메뉴 닫기가 작동하지 않습니다.

나는 피들을 만들었습니다.이 코드는 완벽하게 열리고 닫히는 코드입니다. 여기서 작동하지 않습니다.

Fiddle

JS :

$('#responsive-menu-button').sidr({ 
    name: 'sidr', 
    source: '#menu', 
    side: 'left' 
}); 

CSS :

#mobile-header { 
    display: block; 
    position: absolute; 
    top: 15px; 
    right: 0; 
} 
#mobile-header #responsive-menu-button { 
    height: 41px; 
    width: 42px; 
    display:block; 
} 
#menu { 
    display: none; 
} 

HTML :

또한
<div id="mobile-header"> <a id="responsive-menu-button" href="#menu">THE MENU</a> 

</div> 
<div id="menu"> 
    <ul> 
     <li><a class="menu first" href="#first">First</a> 
     </li> 
     <li><a class="menu second" href="#second"> Second</a> 
     </li> 
     <li><a class="menu third" href="#third">third</a> 
     </li> 
     <li><a class="menu fourth" href="#fourth">fourth</a> 
     </li> 
    </ul> 
</div> 

내 뷰포트 :

<meta name="viewport" content="width=device-width, initial-scale=1.0"> 

답변

0

입력하신 코드는 괜찮습니다. 아시다시피 개폐를위한 추가 JavaScript가 필요합니다. 이 기능은 Google 크롬의 웹 및 모바일 버전에서 작동합니다. jQuery(".sidr-class-sub-menu").hide();가 위치해 곳

<script src="http://yoursite.domain.../jquery.sidr.min.js"></script> 

<script> 
jQuery('#responsive-menu-button').sidr({ 
name: 'sidr-main', 
source: '.menu-main-nav-container' 
}); 

jQuery(window).load(function() { 
if(jQuery("#sidr-main").length !== 0) {   
    jQuery(".sidr-class-sub-menu").hide();  
    jQuery("li.sidr-class-menu-item ul.sidr-class-sub-menu").each(function() { 
    jQuery(this).after("<div class='lnk-plus'>+</div>"); 
    }); 

    jQuery(".lnk-plus").toggle(function() { 
     var id1= jQuery(this).parent().attr("id"); 
     jQuery("#" + id1 + " ul.sidr-class-sub-menu").show(); 
     jQuery("#" + id1 + " .sidr-class-menu-item-has-children ul").hide(); 
     jQuery(this).html("-"); 
     }, function() { 
     var id1= jQuery(this).parent().attr("id"); 
     jQuery("#" + id1 + " ul.sidr-class-sub-menu").hide(); 
     jQuery(this).html("+"); 
     }); 
     } 
    }); 
</script> 

은주의하시기 바랍니다.

관련 문제