Question

我正在尝试通过向左滑动手势来隐藏汉堡菜单。默认情况下，我们需要触摸旁边的才能将其关闭。我已经加载了一个非常轻巧的库，以便可以执行触摸操作（http://www.netcu.de/jquery-touchwipe-iphone-ipad-library）。

// Clicking out of drawer closes it
this.nodes.$page.on(
  'click.drawer',
  $.proxy(function() {
    this.close();
    return false;
  }, this)
);

// Pressing escape closes drawer
this.nodes.$parent.on(
  'keyup.drawer',
  $.proxy(function(evt) {
    if (evt.keyCode === 27) {
      this.close();
    }
  }, this)
);

// This is my own code - swiping left closes it
$( '#NavDrawer' ).touchwipe({
 wipeLeft: function() {
 alert("yes, you swiped left on the menu");
   // Now what ?
 },
});

您可以在此处进行实时取景：https://themes.shopify.com/themes/venture/styles/outdoors/preview?mobile=true

我首先尝试使用实际的结构来隐藏菜单，仅需轻扫一下即可，但是却出现了故障。除其他外，我不了解'keyup.drawer'和'click.drawer'的来源。理想情况下，我将复制这段代码并改用'swipeleft.drawer'。像这样：

// Swiping left method
this.nodes.$page.on(
  'swipeleft.drawer',
  $.proxy(function() {
    this.close();
    return false;
  }, this)
);

如果有帮助的话，这里是全局函数的完整代码：

window.Drawers = (function() {
  var Drawer = function(id, position, options) {
  var defaults = {
    close: '.js-drawer-close',
    open: '.js-drawer-open-' + position,
    openClass: 'js-drawer-open',
    dirOpenClass: 'js-drawer-open-' + position
};

this.nodes = {
  $parent: $('body, html'),
  $page: $('.page-element'),
  $moved: $('.is-moved-by-drawer')
};

this.config = $.extend(defaults, options);
this.position = position;

this.$drawer = $('#' + id);
this.$open = $(this.config.open);

if (!this.$drawer.length) {
  return false;
}

this.drawerIsOpen = false;
this.init();
};

Drawer.prototype.init = function() {
 this.$open.attr('aria-expanded', 'false');
 this.$open.on('click', $.proxy(this.open, this));
 this.$drawer.find(this.config.close).on('click', $.proxy(this.close, this));
};

Drawer.prototype.open = function(evt) {
// Keep track if drawer was opened from a click, or called by another 
function
var externalCall = false;

// don't open an opened drawer
if (this.drawerIsOpen) {
  return;
}

this.$open.addClass(this.config.openClass);

// Prevent following href if link is clicked
if (evt) {
  evt.preventDefault();
} else {
  externalCall = true;
}

// Without this, the drawer opens, the click event bubbles up to $nodes.page
// which closes the drawer.
if (evt && evt.stopPropagation) {
  evt.stopPropagation();
  // save the source of the click, we'll focus to this on close
  this.$activeSource = $(evt.currentTarget);
}

if (this.drawerIsOpen && !externalCall) {
  return this.close();
}

// Add is-transitioning class to moved elements on open so drawer can have
// transition for close animation
this.nodes.$moved.addClass('is-transitioning');
this.$drawer.prepareTransition();

this.nodes.$parent.addClass(
  this.config.openClass + ' ' + this.config.dirOpenClass
);
this.drawerIsOpen = true;

// Set focus on drawer
slate.a11y.trapFocus({
  $container: this.$drawer,
  namespace: 'drawer_focus'
});

// Run function when draw opens if set
if (
  this.config.onDrawerOpen &&
  typeof this.config.onDrawerOpen === 'function'
) {
  if (!externalCall) {
    this.config.onDrawerOpen();
  }
}

if (this.$activeSource && this.$activeSource.attr('aria-expanded')) {
  this.$activeSource.attr('aria-expanded', 'true');
}

this.bindEvents();
};

Drawer.prototype.close = function() {
// don't close a closed drawer
if (!this.drawerIsOpen) {
  return;
}

this.$open.removeClass(this.config.openClass);

// deselect any focused form elements
$(document.activeElement).trigger('blur');

// Ensure closing transition is applied to moved elements, like the nav
this.nodes.$moved.prepareTransition({ disableExisting: true });
this.$drawer.prepareTransition({ disableExisting: true });

this.nodes.$parent.removeClass(
  this.config.dirOpenClass + ' ' + this.config.openClass
);

this.drawerIsOpen = false;

// Remove focus on drawer
slate.a11y.removeTrapFocus({
  $container: this.$drawer,
  namespace: 'drawer_focus'
});

if (this.$activeSource && this.$activeSource.attr('aria-expanded')) {
  this.$activeSource.attr('aria-expanded', 'false');
}

this.unbindEvents();
};

Drawer.prototype.bindEvents = function() {
// Lock scrolling on mobile
this.nodes.$page.on('touchmove.drawer', function() {
  return false;
});

// Clicking out of drawer closes it
this.nodes.$page.on(
  'click.drawer',
  $.proxy(function() {
    this.close();
    return false;
  }, this)
);

// This is my own code - swiping left closes it
$( '#NavDrawer' ).touchwipe({
 wipeLeft: function() {
 alert("yes, you swiped left on the menu");
   // Now what ?
 },
});

// Pressing escape closes drawer
this.nodes.$parent.on(
  'keyup.drawer',
  $.proxy(function(evt) {
    if (evt.keyCode === 27) {
      this.close();
    }
  }, this)
);
};

Drawer.prototype.unbindEvents = function() {
this.nodes.$page.off('.drawer');
this.nodes.$parent.off('.drawer');
};

return Drawer;
})();

有什么主意我应该如何解决这个问题？

使用滑动手势（而不是单击）隐藏移动菜单

0 个答案: