Javascript无法在ipad在ios 13.7和ios 14.0上测试-在chrome，safari和firefox中测试或iphone在iphone SE ios 13.7上测试上不起作用

问题描述

我想知道您是否可以帮助我？我正在尝试使用一段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,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,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);
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）