Question

我昨天问了这个问题，希望这个问题更清楚，因为我现在已经提供了我商店的实例。

我正在开发Shopify主题。我一直在使用Timber作为我的基础，我目前在使用Quick Cart和Quick Shop / View抽屉时遇到了问题。

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

由于它们目前彼此重叠，我需要更改JS，以便在点击时z-index发生变化，以便调用正确的抽屉在堆栈中最高。

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

的链接

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()功能中添加（并根据您的需要调整）。

Answer 2

如果你需要在点击一个按钮时修改div的z-index，你应该在你的onclick（）函数中输入这个代码，否则如果你需要在你阅读页面时激活它，你应该把它放在一个$（document）.ready（）函数，代码是：

$('#yourID').css('z-index', '10');

Answer 3

您可以使用：

document.getElementById("your-element-id").style.zIndex = 5;

它是纯粹的Javascript并将z-index设置为5.只需将此绑定到onClick事件即可！

如何使用JS点击为div提供更高的z-index？

3 个答案: