Question

我一直在圈子里寻找解决方案，以解决我从未想到过的问题，该问题可能在2019年出现。

我正在忙于建立一个站点，并使用“汉堡包”菜单来缩小屏幕尺寸。在适用于多种设备的Google Dev工具中，一切看起来都不错，但是一旦我在iPhone上进行了真实世界的测试，汉堡包菜单就死了，“立即订购！”的样式也变了按钮搞砸了吗？

是否有一种简单的方法来更改CSS或JS，以便该站点可以在ios上运行？

这是我的代码：

document.addEventListener("click", function (e) {
  if (e.target.id === "burger-time") {
    document.querySelector('nav').classList.add('open');
    document.getElementById('burger-time').style.visibility = 'hidden';
  } else {
    document.querySelector('nav').classList.remove('open');
    document.getElementById('burger-time').style.visibility = 'visible';
  }
});

#header-nav-background {
  display: block;
  background-color: rgb(31, 70, 189);
  background-color: rgba(31, 70, 189, .5);
  height: 54px;
  width: 100%;
}

#header-ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: rgb(31, 70, 189);
  background-color: rgba(31, 70, 189, 1);
  z-index: 1200;
}

.button-style {
  font-size: 20px;
  font-family: 'Roboto', sans-serif;
}

#burger-time{
  position: absolute;
  visibility: hidden;
}

@media screen and (max-width: 669px) and (min-width: 300px) {
  .header {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    background-color: rgb(255, 255, 255);
    background-color: rgba(255, 255, 255, 1);
    border-bottom: 5px solid #02b3e4;
    border-bottom-style: none;
  }
  nav {
    width: 140px;
    height: 400px;
    -webkit-transform: translate(-565px, 0);
    -ms-transform: translate(-140px, 0);
    -moz-transform: translate(-140px, 0);
    -o-transform: translate(-140px, 0);
    transform: translate(-140px, 0);
    -webkit-transition: 0.3s ease;
    -o-transition: 0.3s ease;
    -moz-transition: 0.3s ease;
  }
  .hidden {
    visibility: hidden;
  }

  .li .a {
    display: block;
    color: white;
    padding: 11px 45px 19px 0;
    text-decoration: none;
    width: 100%;
  }

 /* Change the link color to rgba(31, 70, 189, 1) on hover */
  .li .a:hover {
    font-family: 'Roboto', sans-serif;
    font-weight: 600;
    color: rgb(31, 70, 189);
    color: rgba(31, 70, 189, 1);
    text-shadow: 1px 1px 0 black;
    background-color: white;
  }

  .button-style {
    font-size: 20px;
    font-family: 'Roboto', sans-serif;
  }

  #header-nav-background {
    display: block;
    background-color: rgb(31, 70, 189);
    background-color: rgba(31, 70, 189, 1);
    height: 54px;
  }

  #burger-time{
    position: absolute;
    visibility: visible;
    display: flex;
    padding: 0 2px 2px 0;
    font-size: 52px;
    transform: translate(140px, 0);
    color: white;
    text-shadow: 2px 2px 2px black;
  }

  #burger-time:hover {
    text-decoration: none;
    color: rgb(31, 70, 189);
    color: rgba(31, 70, 189, 1);
    font-weight: 600;
    background-color: white;
    text-shadow: 1px 1px 1px black;
  }
  
}

<div id="header-nav-background">
  <nav>
    <ul id="header-ul">
      <li class="li button-style"><a class="a" href="index.html">Home</a></li>
      <li class="li button-style">
        <a class="a" href="services.html">Services</a>
      </li>
      <li class="li button-style"><a class="a" href="about.html">About</a></li>
      <li class="li button-style">
        <a class="a" href="contact.html">Contact us</a>
      </li>
      <i id="burger-time" class="material-icons">menu</i>
    </ul>
  </nav>
</div>

该网站正在建设中，但您可以在此处查看：http://www.encoreservices.co.za/ESMS/index.html

Answer 1

好吧，在追踪了我整整一天的故事之后，终于有一点光明了……

在移动IOS中，没有“点击”作为事件侦听器，但是在列表中为“触摸”：

https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html#//apple_ref/doc/uid/TP40006511-SW8

因此，我对其进行了测试，并进行了一次小型庆祝活动！现在，我只是复制了代码以使其正常工作，但稍后必须重写它。接下来，按钮样式将不得不查看该样式，但以后也要查看。

document.addEventListener("touchend", function(e) {
  if (e.target.id === "burger-time"){
    document.querySelector('nav').classList.add('open');
    document.getElementById('burger-time').style.visibility ='hidden';
  } else {
    document.querySelector('nav').classList.remove('open');
    document.getElementById('burger-time').style.visibility ='visible';
  }
});

document.addEventListener("click", function(e) {
  if (e.target.id === "burger-time"){
    document.querySelector('nav').classList.add('open');
    document.getElementById('burger-time').style.visibility ='hidden';
  } else {
    document.querySelector('nav').classList.remove('open');
    document.getElementById('burger-time').style.visibility ='visible';
  }
});

Answer 2

因此，这不仅仅是“ touchend”和“ click”差异。 MDN文档中有一些关于如何添加移动设备事件监听器的深刻见解！

最佳做法部分

以下是使用触摸事件时要考虑的一些最佳做法：

将接触点处理程序添加到特定的目标元素（而不是整个文档或文档树中更高层次的节点）。

显然，对移动设备（不仅仅是iPhone）使用“ document.addEventListener（）”不是一个好习惯。他们说，最好选择购买单个元素。 https://developer.mozilla.org/en-US/docs/Web/API/Touch_events/Using_Touch_Events

情况就是如此，这些更改是使burger菜单在我可以访问的所有设备上正常工作所需要的：

let rootEvent = document.getElementById("rootElement");

let burgerNav = document.getElementById("burger-time");

burgerNav.addEventListener("click", function(e) {
    document.querySelector('nav').classList.add('open');
    burgerNav.style.visibility ='hidden';
    e.preventDefault();
    e.stopPropagation();


});

closeNav = function(){
    if (burgerNav.style.visibility === "hidden"){
       document.querySelector('nav').classList.remove('open');
       burgerNav.style.visibility ='visible';
    }
};

rootEvent.addEventListener("click", closeNav);
rootEvent.addEventListener("touchend", closeNav);

<html lang="en" dir="ltr" id="rootElement">

这可能不是唯一的方法，但如果蚂蚁摔坏了...

响应式汉堡菜单在移动Safari中不起作用

2 个答案: