下拉导航不适用于移动设备（JavaScript、HTML、CSS）

Question

我使用 JS 和 SCSS 构建了一个导航。在桌面上它工作得很好，一些移动设备（如 Galaxy S10）也显示下拉菜单。但当我单击导航元素时，大多数其他移动设备不会执行任何操作。

这是我的JS代码：

document.writeln(
  ` <ul>
<li><a href="../index.html">Start</a></li>
<li>Menu point 1<i class="fa fa-caret-down" aria-hidden="true"></i><i class="fa fa-caret-right" aria-hidden="true"></i>  
  <ul class="dropdown">
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
  </ul>
</li>
<li>Menu point 2<i class="fa fa-caret-down" aria-hidden="true"></i><i class="fa fa-caret-right" aria-hidden="true"></i>
    <ul class="dropdown">
      <li><a href="#">1</a></li>
      <li><a href="#">2</a></li>
      <li><a href="#">3</a></li>
    </ul>
  </li>
</ul>`
);

CSS：

nav {
    z-index: 10;
    font-weight: bold;
    text-transform: uppercase;
    color: $color-dark;
    text-decoration: none;

    a {
      &:hover {
        color: $color-accent-dark;
      }
    }

      
      ul {
        list-style: none;
        margin: 0;
        padding-left: 0;

      }
      
      li {
        display: block;
        float: left;
        padding: 1rem;
        position: relative;
        text-decoration: none;
        transition-duration: 0.5s;
        min-width: 90px;

        .fa-caret-right {
          display: none;
        }
      }

        
      li:hover,
      li:focus-within {
        cursor: pointer;
        color: $color-accent-dark;


        .fa-caret-down {
          display: none;
        }

        .fa-caret-right {
          display: inline;
        }

      }
      
      li:focus-within a {
        outline: none;
      }

      ul li:last-child {
        border-bottom-left-radius: 15px;
        border-bottom-right-radius: 15px;
      }
      
      ul li ul {
        visibility: hidden;
        opacity: 0;
        min-width: 5rem;
        position: absolute;
        transition: all 0.5s ease;
        margin-top: 1rem;
        left: 0;
        display: none;
      }
      
      ul li:hover > ul,
      ul li:focus-within > ul,
      ul li ul:hover,
      ul li ul:focus {
         visibility: visible;
         opacity: 1;
         display: block;
         z-index: 15;
      }
      
      ul li ul li {
        background-color: $color-light;
        clear: both;
        width: 100%;
      }

}

我希望它也可以在移动设备上点击，但我找不到解决方案。你有什么想法吗？我在这里错过了什么吗？

Answer 1

document.writeln()

不建议再使用，如 mozilla 开发者网络 (MDN) 中所述 https://developer.mozilla.org/en-US/docs/Web/API/Document/writeln

此外，最好使用一些 javascript 和 css 来控制菜单的可见或隐藏状态，而不是仅使用 css。悬停和焦点在桌面上的工作方式可能并不总是在所有触摸屏设备上完全相同。因此，使用 CSS 选择器内的悬停和焦点很难保证所有触摸设备上的预期行为。