Foundation 5 Off-canvas Swipe

是否可以使用滑动手势打开和关闭Foundation 5 Off-Canvas菜单？

参考： http ： //foundation.zurb.com/docs/components/offcanvas.html

Answer 1

Foundation目前不支持此function，但使用jQuery Mobile有一个简单的解决方案。 请注意，此示例适用于左侧的单个canvas。

首先，确保包含jQuery和JQM：

jQuery： http ： //jquery.com/
jQuery Mobile： http ： //jquerymobile.com/

然后添加以下内容：

$( document ).on( "swipeleft swiperight", function( e ) { if ( $.mobile.activePage.jqmData( "panel" ) !== "open" ) { if ( e.type === "swipeleft" ) { $('.off-canvas-wrap').removeClass('move-right'); } else if ( e.type === "swiperight" ) { $('.off-canvas-wrap').addClass('move-right'); } } }); 

只是想我分享，因为我找不到任何解决方案！

Answer 2

我只想补充@ 88MPG的优秀答案;

我还没有使用jquery.mobile，在使用它时我的代码有些问题。 相反，我从github添加了jquery.touchSwipe并使用以下代码：

注意：当然可以跳过上面的function参数。 我刚刚添加它们用于酿造。