javascript - Javascript 无法在 ipad 上运行（在 ios 13.7 和 ios 14.0 上测试 - 在 chrome、safari 和 firefox 中）或 iphone（在 iphone SE ios 13.7 上测试）

Question

我想知道你是否可以帮助我？我正在尝试让一段 javascript 在 ios 设备上工作。我在 div 中的页面上有多个图像，单击时我想滑过一个信息面板（隐藏在左侧），一旦该面板滑入，如果单击该面板，我希望它滑回左边。

这是我在所有桌面浏览器上完美运行但在 ios 上没有任何作用的代码 - 我无法理解它并且不确定如何在 ios 上测试或检查问题。

这是一个小提琴：https ://jsfiddle.net/adpLqbt2/31/

CSS

.box {
  display: inline-block;
  position: relative;
  width: 500px;
  height: 500px;
  overflow: hidden;
  }

.overlay-btn {
  display: inline-block;
  position: absolute;
  cursor: pointer;
  height: 500px;
  width: 500px;
  z-index: 10;
  background: url('../img/icons/info.svg') 98% 98% no-repeat;
}

.overlay-content {
  position: absolute;
  top: 0;
  left: -500px;
  width: 500px;
  margin: 0;
  height: 500px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  transition: all 0.5s ease-in-out;
  -webkit-transition: all 0.5s ease-in-out;
}


.over-show {
  left: 0;
  height: 500px;
  transition: all 0.5s ease-out;
  -webkit-transition: all 0.5s ease-out;
}

HTML

           <div class="box">
            <div class="overlay-btn"></div>
            <div class="overlay-content"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
            <img src="https://via.placeholder.com/500" alt="rah" />
          </div>
          <div class="box">
            <div class="overlay-btn"></div>
            <div class="overlay-content"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
            <img src="https://via.placeholder.com/500" alt="yay" />
          </div>
          <div class="box">
            <div class="overlay-btn"></div>
            <div class="overlay-content"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
            <img src="https://via.placeholder.com/500" alt="see" />
          </div>

JS

const triggers = document.getElementsByClassName('overlay-btn');
const triggerArray = Array.from(triggers).entries();
const panels = document.getElementsByClassName('overlay-content');
const infoButtons = document.getElementsByClassName('overlay-btn');

for (let [index, trigger] of triggerArray) {
  let triggerIndex = index;
  function togglePanel() {
    panels[triggerIndex].classList.toggle('over-show');
    infoButtons[triggerIndex].classList.toggle('js-fade');
  }
  trigger.addEventListener('click', togglePanel);
  infoButtons[triggerIndex].addEventListener('click', togglePanel);
}

标签： javascriptiosarraysshow-hide