javascript - 如何在点击 JS 时为 div 提供更高的 z-index？

Question

我昨天问了这个问题，希望这个问题更清楚，因为我现在提供了我的商店的一个工作示例。

我正在开发一个 Shopify 主题。我一直在使用 Timber作为我的基地，我目前的 Quick Cart 和 Quick Shop/View 抽屉有问题。

我的网站右侧有 2 个抽屉，1 个用于购物车，1 个用于产品快速查看选项。抽屉当前滑动打开 - #PageContainer 在单击时向左移动以显示每个抽屉。

由于它们目前位于彼此之上，因此我需要更改 JS，以便在单击时更改 z-index，以便调用正确的抽屉位于堆栈中的最高位置。

我不太擅长 JS，所以不确定这是否是一项简单的任务？

这是我的 Dev Store 的链接

JS:

timber.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: $('#PageContainer'),
  moved: $('.is-moved-by-drawer')
};

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

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

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

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

Drawer.prototype.init = function () {
$(this.config.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;

// 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;

// 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');
}

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

this.$nodes.page.on('click.drawer', $.proxy(function () {
 this.close();
 return false;
}, this));
};

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

// 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;

this.$nodes.page.off('.drawer');
};
return Drawer;
})();

更新

按照 Ciprian 的指示，我在我的 JS 中放置了以下内容，这使得 #CartDrawer 具有更高的 z-index。我现在不确定我如何调整它，以便它知道哪个按钮具有更高的点击按钮。这是我试过的:

...

Drawer.prototype.init = function () {
$(this.config.open).on('click', $.proxy(this.open, this));

$('.js-drawer-open-right-two').click(function(){
  $(this).data('clicked', true);
});

if($('.js-drawer-open-right-two').data('clicked')) {
  //clicked element, do-some-stuff
  $('#QuickShopDrawer').css('z-index', '999');
} else {
  //run function 2
  $('#CartDrawer').css('z-index', '999');
}

this.$drawer.find(this.config.close).on('click', $.proxy(this.close, this));
};

...

Answer 1

方法是这样的:

$('.yourselector').css('z-index', '999');

将它添加到您的 onclick() 函数中(并使其适应您的需要)。