在我的非画布菜单上添加滑动功能

Question

I have a off canvas menu on my mobile HTML site.

DEMO

Its working good but slide effect working on just toggle-button. But I need swipe function on the menu. How can I add it?

JS:

$(function() {

    // Toggle Nav on Click
    $('.toggle-nav').click(function() {
        // Calling a function in case you want to expand upon this.
        toggleNav();
    });


});

function toggleNav() {
    if ($('#site-wrapper').hasClass('show-nav')) {
        // Do things on Nav Close
        $('#site-wrapper').removeClass('show-nav');
    } else {
        // Do things on Nav Open
        $('#site-wrapper').addClass('show-nav');
    }

}

Answer 1

Since you're using jQuery you can take advantage of the jQuery swipe event handler.

$(window).on("swipe", function(event){ ... }) .

Docs here.

Answer 2

Simply listen to the swipe event

$("#site-canvas").on("swipe", function() {
    toggleNav();
});