javascript - 需要帮助/Off-Canvas Flexbox 菜单切换/z-index

Question

更新

通过将以下内容添加到“站点菜单”和“容器”样式，我能够让侧边导航项堆叠:

{
position: absolute;
display: flex;
align-items: center;
justify-content: center;
}

唯一剩下的就是让内容根据点击的标签正确切换。

原帖

我正在使用 flexbox 和 Off-Canvas menu tutorial创建一个悬停的sidenav菜单。

当按下一个选项卡时，我希望该 flex 元素滑到屏幕上并位于最前面。我有滑动到屏幕上的工作，这是导致问题的堆叠顺序。如何更改 flex 元素的堆叠顺序或根据单击的选项卡在显示的内容之间切换？图片应该有助于澄清:

Image - Flexbox Off Canvas Menu

这是我目前为该网站所做的工作的链接: <强> LINK

我看过使用 css 和 javascript 更改堆叠顺序的示例，但我无法完全理解如何使其与 flexbox 元素一起工作。

CSS

#site-wrapper {
    position: relative;
    overflow: hidden;
    width: 100%;
    margin: 0;
    padding: 0;
}

#site-canvas {
  width: 100%;
  height: 84vh;
  position: relative;
  -webkit-transform: translateX(0);
  transform: translateX(0);
  -webkit-transition: .3s ease all;
  transition: .3s ease all;
    margin: 0 auto;
  padding: 0.8% 20px; /* Temp: Just spacing. */

    -webkit-box-shadow:inset 1px 1px 60px 5px rgba(100,100,100,0.5);
    box-shadow:inset 1px 1px 60px 5px rgba(100,100,100,0.5);

    display: flex;
    flex-wrap: wrap;
}

#site-menu {
  width: 300px;
  height: 100%;
  position: absolute;
  top: 0;
  left: -300px;
  /*background: #428bca;*/
  padding: 15px 0 15px 15px;
}

/* Animation */
#site-wrapper.show-nav #site-canvas {
  -webkit-transform: translateX(300px);
  transform: translateX(300px);
}   

#sidenav span {
    display: flex;
    flex:auto;
    justify-content: flex-end;
    position: absolute; /* Position them relative to the browser window */
    left: -80px; /* Position them outside of the screen */
    transition: 0.3s; /* Add transition on hover */
    padding: 10px 15px; /* 15px padding */
    width: 140px; /* Set a specific width */
    text-decoration: none; /* Remove underline */
    font-size: 20px; /* Increase font size */
    color: white; /* White text color */
    border-radius: 0 5px 5px 0; /* Rounded corners on the top right and bottom right side */
}

#sidenav span:hover {
  left: 0; /* On mouse-over, make the elements appear as they should */
    cursor: pointer;
}

.container {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;  
}

#tabOne {
    top: 20px;
    background-color: #333333; /* Black */
}

#tabTwo {
    top: 20px;
    background-color: #666666; /* Black */
}

#tabThree {
    top: 20px;
    background-color: #999999; /* Black */
}

HTML

<div class="page">
  <div id="site-wrapper">
    <div id="site-canvas">
      <div id="mySidenav" class="toggle-nav sidenav">
        <span id="tabOne">
        <h4>Tab One </h4>
        <img alt="Tab Icon"/>
        </span>
        <span id="tabTwo">
        <h4>Tab Two </h4>
        <img alt="Tab Icon"/>
        </span>
        <span id="tabThree">
        <h4>Tab Three </h4>
        <img alt="Tab Icon"/>
        </span>
      </div>
      <div id="site-menu flex-container">
        <div class="container" id="tabOne">
          <div class="tabOne-flexItem">
            <h1>Tab One Content</h1>
            <p>Lorem ipsum dolor sit amet, laoreet dolore magna aliquam erat volutpat.</p>
            <p>Lorem ipsum dolor sit amet, laoreet dolore magna aliquam erat volutpat.</p>
          </div>
        </div>
        <div class="container" id="tabTwo">
          <div class="tabTwo-flexItem">
            <h1>Tab One Content</h1>
            <p>Lorem ipsum dolor sit amet, laoreet dolore magna aliquam erat volutpat.</p>
            <p>Lorem ipsum dolor sit amet, laoreet dolore magna aliquam erat volutpat.</p>
          </div>
        </div>
      </div>
      <div class="main_content">
        <div>
          Main Page Content Goes Here
        </div>
      </div>
    </div>
  </div>
</div>

Javascript

<script>
/* OFF CANVAS */
$(function() {
    "use strict";
  $('.toggle-nav').click(function() {

    toggleNav();
  });
});

/*========================================
=            CUSTOM FUNCTIONS            =
========================================*/
function toggleNav() {
"use strict";
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');
}

}

</script>

如有任何指导，我们将不胜感激。

Answer 1

我对您的代码进行了一些更改以使堆叠顺序正常工作。我将数据属性添加到选项卡，并使用 jQuery 来使用属性值来隐藏或显示容器。由于单击选项卡会更改内容，因此我不想在单击选项卡时关闭 Canvas ，因此我使用悬停来打开 Canvas 。

这是更改哪个容器可见的新 jQuery 代码:

$( ".sidenav span" ).click(function() {
  var index = $(this).data('index');

  $( ".container" ).each(function(i) {
    if (i != index) {
        $(this).addClass('hidden');
    }
    else {
        $(this).removeClass('hidden');
    }
  });
});

看看 fiddle .