Как вызвать div с высшим z-индексом вверху по щелчку?

Question

В настоящее время у меня есть 2 ящика/меню справа от моего сайта, 1 для тележки и 1 для быстрого просмотра продукта.

Я построил свою тему, используя Shopify Timber Framework, и выдвижные ящики в настоящее время слайды открываются (#PageContainer перемещается влево по щелчку, чтобы открыть ящик).

Мне нужно изменить JS так, чтобы щелкнуть изменения z-index, чтобы нужный ящик был наивысшим в стеке.

Я не очень разбираюсь в JS, поэтому не уверен, что это простая задача?

Любая помощь была бы принята с благодарностью!

Мой код выглядит следующим образом:

Update: Ссылка на 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; 
})(); 

CSS/SASS:

.js-drawer-open { 
    overflow: hidden; 
} 

.drawer { 
    position: fixed; 
    display: block; 
    overflow-y: auto; 
    overflow-x: hidden; 
    -webkit-overflow-scrolling: touch; 
    top: 0; 
    bottom: 0; 
    padding: 0 ($gutter/2) ($gutter/2); 
    max-width: 95%; 
    z-index: $zindexDrawer; 
    color: $colorDrawerText; 
    background-color: $colorDrawers; 
    @include transition($drawerTransition); 

    a { 
    color: $colorDrawerText; 

    &:hover, 
    &:focus { 
    opacity: 0.7; 
    } 
    } 

    input, 
    textarea { 
    border-color: $colorDrawerBorder; 
    } 
} 

.drawer-inner { 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    padding: 15px 15px 0; 
    overflow: auto; 
    -webkit-overflow-scrolling: touch; 
} 

.drawer--has-fixed-footer .drawer__inner { 
    overflow: hidden; 
} 

.drawer--left { 
    width: $drawerNavWidth; 
    left: 0; 
    border-right: 1px solid $colorDrawerBorder; 

    .js-drawer-open-left & { 
    display: block; 

.lt-ie9 & { 
    left: 0; 
    } 
} 
} 

.drawer--right { 
    width: $drawerCartWidth; 
    right: 0; 
    border-left: 1px solid $colorDrawerBorder; 

    .js-drawer-open-right & { 
    display: block; 

    .lt-ie9 & { 
     right: 0; 
    } 
    } 
} 

.drawer--right-two { 
    width: $drawerQuickShopWidth; 
    right: -$drawerQuickShopWidth; 
    border-left: 1px solid $colorDrawerBorder; 

    .js-drawer-open-right-two & { 
    display: block; 
    @include transform(translateX(-$drawerQuickShopWidth)); 

    .lt-ie9 & { 
     right: 0; 
    } 
    } 
} 

#PageContainer { 
    position: relative; 
    background-color: #fff; 
    overflow: hidden; 
    z-index: 10000; 
} 

.is-moved-by-drawer { 
    @include transition($drawerTransition); 

    .js-drawer-open-left & { 
    @include transform(translateX($drawerNavWidth)); 
    } 

    .js-drawer-open-right & { 
    @include transform(translateX(-$drawerCartWidth)); 
    } 

    .js-drawer-open-right-two & { 
    @include transform(translateX(-$drawerQuickShopWidth)); 
    } 
} 

Answer 1

Дайте ваши два выдвижных общий класс, затем запросите документ fo r который был нажат. Установите z-индекс обоих ящиков, затем установите z-индекс щелкнутого ящика на что-то более высокое!

window.onload = function() { 

    [].forEach.call(document.querySelectorAll('.drawers'), function(el) { 
     el.addEventListener('click', drawerOpened); 
    }); 

     function drawerOpened() 
     { 
      $('.drawers').css('z-index', '50'); 
      $(this).css('z-index', '60'); 
     } 
    )};