javascript - 视频和菜单 Div 的 Z 索引问题

Question

所以在移动设备上，在研究电影页面部分，我有两个视频和一个带有一些隐藏文本的 div，它们可以通过 javascript 切换以显示或隐藏。研究影片的内容由flexbox组织。在这些视频和文本之上是一个固定的导航栏，与顶部视频“纸男孩”重叠。因此，固定导航不允许用户点击视频。每当用户单击“更多”按钮时，固定的导航栏不会响应通过 javascript 切换的 z-index (-100)。

这是触发菜单和 div 的 JS -

const mediaQueryPhone = window.matchMedia('(max-width: 1000px)')

if (mediaQueryPhone.matches) {
   let menuOpen = false;
   morebtn.addEventListener('click', () => {
      processMenu.classList.toggle('fadeMenu');
      menuOpen = processMenu.classList.contains('fadeMenu');
      if (!menuOpen) {
         processMenu.style.touchAction = "none";
         processMenu.style.pointerEvents = "none"
      } else {
         processMenu.style.touchAction = "auto";
         processMenu.style.pointerEvents = "all"

      }
   })



   const creditIcon = document.querySelector('.credit-icon');
   const creditText = document.querySelector('.credit-text');
   
   let creditOpen = false;
   
      creditIcon.addEventListener('click', () => {
         creditText.classList.toggle('hideElement');
         creditOpen = creditText.classList.contains('hideElement');
         if (!creditOpen) {
            creditText.style.display = "block";
         } else {
            creditText.style.display = "none";
         }
      })

带有 2 个视频的 HTML 页面

 <div class="mobile__header-controls">
     <div class="mobile__nav">
        <button class="mobile__more">+</button>
        <div class="mobile__process-nav">
           <a href="#show" data-tab-target="#show" class="mobile__tab">Show</a>
           <a href="#about" data-tab-target="#about" class="mobile__tab">About</a>
           <a href="#researchFilm-ba" data-tab-target="#researchFilm-ba" class="mobile__tab">Research Films</a>
           <a href="#stills-ba" data-tab-target="#stills-ba" class="mobile__tab">Stills</a>
           <a href="#lookbook" data-tab-target="#lookbook" class="mobile__tab">Lookbook</a>
        </div>
        <div class="mobile__main-nav">
           <a class="mabtn" href="/MA.html">MA</a>
           <a class="capbtn" href="/capsule.html">Capsule</a>
           <a class="babtn user-border" href="/BA.html">BA</a>
        </div>
     </div>
     <a href="/index.html" class="info-back">Back</a>
  </div>
<div id="researchFilm-ba" data-tab-content>
            <div class="video-wrapper-ba align black-text fade-in">
               <p>Dear You (2017)</p>
               <video class="mood2" video controls poster="img/BA/Screenshot 2020-08-24 at 12.10.24 am.png"
                  preload="metadata">
                  <source src="/img/BA/dear you,.mp4" type="video/mp4">
               </video>
            </div>
            <div  id="paperBoys" class="video-wrapper-ba black-text fade-in">
               <p>Paper Boys (2018)</p>
               <video class="mood" video controls poster="/img/BA/Screenshot 2020-08-24 at 12.10.05 am.png"
                  preload="metadata">
                  <source src="/img/BA/Paper Boys.mp4" type="video/mp4">
               </video>
            </div>
            <div class="credit-ba black-text">
               <button class="credit-icon">(...)</button>
               <div class="credit-text credtitBAMargin hideElement">
                  <p>
                     Thank you
                     to my team of helpers
                     <br><br>
                     and the following
                     <br><br>
                     Collaborators<br>
                     <br>Film produced with Taka Hata
                     <br>Accessories produced by Kristy Fan
                     <br>Soundtrack composed by Zacharias Wolfe
                     and Friends at Royal College of Music
                     <br><br>
                     Look Book
                     <br>Make Up by Kristina Pavlovic
                     <br>Look Book photographed by Simonas Berukstis
                     <br>Slime Making photographed by Oliver Vanes
                     <br><br>
                     Show
                     <br>Internal Show Make Up by Phoebe Walters
                     <br>Press Show Make Up by Mariko Yamamoto
                     <br>Supported by L’Oréal Professionnel
                     <br><br>
                     Models
                     <br>Yota Hoshi
                     <br>Masato Funaoka
                     <br>Ryan
                     <br>Youtian Zhang
                     <br>Tien Ai Guan
                     <br>Xander Ang
                     <br>Wing Fung
                     <br><br>

                     and the BAFCSM team</p>
               </div>
            </div>
         </div>

CSS

.mobile__process-nav { // this is the menu dropdown styling
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      height: 30vh;
      height: calc(var(--vh, 1vh) * 30);
      color: white;
      border: 2px solid white;
      opacity: 0;
      transition: opacity 0.3s ease-in-out;
      -moz-transition: opacity 0.3s ease-in-out;
      -webkit-transition: opacity 0.3s ease-in-out;
      -ms-transition: opacity 0.3s ease-in-out;
      -o-transition: opacity 0.3s ease-in-out;
      z-index: 0;
      margin-top: 1rem;
      margin-left: 2rem;
   }

   .fadeMenu {
      opacity: 1;
   }
#researchFilm-ba {

      width: 100%;
      height: 100vh;
      height: calc(var(--vh, 1vh) * 100);
      background-color: white;
      flex-direction: column-reverse;
      justify-content: flex-end;
   }
 .video-wrapper-ba {
      width: 80vw;
      height: 35vh;
      height: calc(var(--vh, 1vh) * 35);
      margin: 0;
      margin-top: 2rem;
   }

   .align {
      margin-top: -1.5rem;
   }

   #researchFilm-ba p,
   #researchFilm p {
      font-size: 1rem;
      font-family: Helvetica, sans-serif;
      font-style: italic;
      margin-bottom: 0rem;
      color: black;

   }

.credit-ba {
      position: absolute;
      display: flex;
      flex-direction: column;
      margin-left: 80vw;
      margin-top: -9vh;
      margin-top: calc(var(--vh, 1vh) * -9);
   }


   .credit-text {
      margin-left: -55vw;
      width: 67vw;
      background-color: white;
      margin-top: 0vh;
      margin-top: calc(var(--vh, 1vh) * 0);
      display: none;
   }

   .credtitBAMargin {
      margin-top: 10vh;
      margin-top: calc(var(--vh, 1vh) * 10);
   }

   .credit-text p {
      width: 60vw;
      color: black;

   }

   .credit-icon {
      padding: 0;
      margin: 1.5rem;
   }

   @media not all and (pointer: coarse) {

      .credit:hover .credit-text,
      .credit-ba:hover .credit-text {
         display: block;
      }

      .contact-a a:hover {
         color: white;
      }

      .menu-container:hover .menu {
         opacity: 1;
         pointer-events: all;
         -ms-transform: translateY(0);
         transform: translateY(0);
         -moz-transform: translateY(0);
         -webkit-transform: translateY(0);
         outline: none;
      }

      .stockist p:hover {
         background-color: black;
      }
   }

标签： javascripthtmlcssz-index