按钮单击时的 CSS 动画仅播放一次，在移动浏览器上第二次单击时不播放

Question

单击按钮时会出现一个下拉菜单。问题是，下拉菜单在 PC 上一直显示动画而没有问题，但在移动浏览器上只播放一次动画（仅限第一次点击）。

            function myFunction() {
            var x = document.getElementById("dropdown");
             if (x.className.indexOf("w3-show") == -1) {
                x.classList.add("w3-show");
             } else { 
                x.classList.remove("w3-show");
             }
            }

         #dropdown { display:none; 
border-radius: .25em;
        box-shadow: 0.1em 0.1em 0.5em rgba(0,0,0,1);
        background-color: rgba(0,0,0,0.3);
        padding: 5px;
        font-size: 22px;
        color: white;
        position: relative;
        /* width:fit-content; */
        width: 250px;
        right: 0;
        left: -25px;
        margin: auto;}
        .w3-show {
            position: relative;
            display: block!important;
          }
          .w3-animate-zoom {
            animation:animatezoom 0.6s;
            -webkit-animation: animatezoom 0.6s;
          }
          @keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)}}

    <button onclick="myFunction()" class="ikincibaslik" id="buttonme">Open dropdown menu</button>
                <div id="dropdown" class="show-on-scroll w3-animate-zoom" >
                        <a href="/imalat/indexfirst.php" class="w3-bar-item">First item</a>
                        <a href="/hizmet/indexsecond.php" class="w3-bar-item">Second item</a>
                </div>

有什么想法吗？

Answer 1

我通过进行以下更改使其正常工作：

• indexOf 用于数组，您想使用事件侦听器和 classlisttoggle：How do I use vanilla JavaScript to write a toggle function I wrote in JQuery?
• 我更新了变量（这是风格问题，不是错误）
• 我更新了 CSS 类以说明 w3-show 类被添加到下拉 id 中，并为下拉 id 添加了 display none
• 我从按钮中删除了 onclick 并改用了 id（样式），并删除了添加和删除的 w3-show 类的空间

编辑：这篇文章的提示：keyframe animation does not work on safari for iOS 这个想法是为每个浏览器前缀调用一个单独的关键帧，所以我添加了一个特定于 webkit 的关键帧，我意识到原来的 animatezoom 没有关闭 }括号。

现在可以了：

var myButton = document.getElementById("buttonme");
var dropDown = document.getElementById("dropdown");

myButton.addEventListener("click", ()=>{
  dropDown.classList.toggle("w3-show");
});

         #dropdown { 
         display:none; 
border-radius: .25em;
        box-shadow: 0.1em 0.1em 0.5em rgba(0,0,0,1);
        background-color: rgba(0,0,0,0.3);
        padding: 5px;
        font-size: 22px;
        color: white;
        position: relative;
        /* width:fit-content; */
        width: 250px;
        right: 0;
        left: -25px;
        margin: auto;}

#dropdown.w3-show {
        position: relative;
        display: block;
      }
      .w3-animate-zoom {
        animation:animatezoom 0.6s;
        -webkit-animation: animatezoom 0.6s;
      }
      
      @keyframes animatezoom{
      from{transform:scale(0)
      } 
      to
      {transform:scale(1)}
      }
      }
      
      @-webkit-keyframes animatezoom {
  from{transform:scale(0)
      } 
      to
      {transform:scale(1)}
      }
}

<button class="ikincibaslik" id="buttonme">Open dropdown menu</button>
                <div id="dropdown" class="show-on-scroll w3-animate-zoom" >
                        <a href="/imalat/indexfirst.php" class="w3-bar-item">First item</a>
                        <a href="/hizmet/indexsecond.php" class="w3-bar-item">Second item</a>
                </div>