메인 페이지를 클릭하면 ons-sliding-menu가 닫힙니다.

Question

<ons-sliding-menu var="slidingMenu" main-page="index.html" menu-page="menu.html" max-slide-distance="200px" type="overlay" side="left" swipable ="true"></ons-sliding-menu> 

내 슬라이딩 메뉴 구조는 위에 있습니다. 슬라이드 메뉴는 버튼을 클릭하면 열고 닫는 것처럼 잘 작동합니다.

하지만 내 문제는, 메뉴의 외부를 클릭하거나 메인 페이지 (index.html을)을 클릭에 슬라이딩 메뉴를 종료 할 필요가있다

이 옵션을 사용할 수 내가 알고 싶습니다

가 또는 모든 작업이 가능합니다.

미리 감사드립니다.

Answer 1

그래, 바깥을 클릭하면 메뉴를 닫는 것이 좋을 것입니다.

슬라이딩 메뉴에 'postopen' 이벤트를 사용하면 클릭 핸들러를 기본 페이지에 연결할 수 있습니다. 클릭 핸들러에서 slidingMenu.close()으로 전화 할 수 있습니다. 클릭 핸들러를 제거하는 것도 중요합니다. 그렇지 않으면 메뉴를 다시 열 수 없습니다.

코드 :

ons.ready(function() { 
    slidingMenu.on('postopen', function() { 
    var main = slidingMenu._element[0]. 
     querySelector('.onsen-sliding-menu__above').children[0], 
     el = angular.element(main); 

    el.on('click', function() { 
     slidingMenu.close(); 
     el.off('click'); 
    }) 
    }); 
}); 

다음 펜이 사용할 수있는 방법을 보여줍니다 http://codepen.io/argelius/pen/jENKeX

을 그것이 내가이 다음 버전에 추가 될 예정입니다 생각 좋은 행동입니다 때문에.

감사

안드레아스가 구현하고 확인합니다