ClassList 删除似乎在 Edge 中不起作用

Question

我已经在我的应用程序中实现了这个动画选项卡，遵循codepen上的此设置。 现在，我想使用普通的 Javascript，而不是 jquery，这就是我写的：

<div class="slides">
              <div class="slides__slide">
                <span class="slide-title">
                  <a href="#">yoga coaching</a>
                  <i class="ion-chevron-down"></i>
                </span>
                  <div class="experience__content">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi rem ab voluptate provident voluptatum
                    veniam cupiditate beatae expedita veritatis aliquid officia doloribus dolore maiores doloremque mollitia! A ducimus autem ut!
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus obcaecati velit autem tenetur doloribus perferendis esse odit
                    animi quasi deserunt recusandae perspiciatis a sapiente aliquam qui libero dolor officiis assumenda.
                  </div>
                </div>

这是 javascript:

const slideTitles = Array.from(document.querySelectorAll('.slide-title'));
let activeClasses = []
slideTitles.forEach(function(el){
  el.addEventListener('click',function(){
    if(activeClasses.length>0){
      activeClasses[0].classList.remove('active')
      activeClasses[0].firstElementChild.getElementsByTagName('i')[0].classList.replace('ion-chevron-up','ion-chevron-down')
      //activeClasses[0].firstElementChild.lastElementChild.classList.replace('ion-chevron-up','ion-chevron-down')
      activeClasses = []
    }
    this.parentElement.classList.add('active')
    this.lastElementChild.classList.replace('ion-chevron-down','ion-chevron-up')
    activeClasses.push(this.parentElement)
  })
})

这个实现在 chrome、firefox opera 中运行良好（我目前无法在 Safari 上测试它），但在 Edge 中我遇到一些问题：首先，当单击幻灯片时，宽度首先递增，然后位置（显然没有过渡效果），这种情况也会在 codepen 中发生，但在我的实现中，删除 classList 函数似乎不起作用：因为如果我单击另一张卡，之前选择的卡仍处于活动位置，并且不会上去吧。

classList 实现似乎可以在 Edge 中使用，而且我编写的代码也可以在其他浏览器中使用..

Answer 1

我用Edge几乎没有问题，但在与Opera mobile战斗几天后发现：

1. classList 属性 可能 如果元素在 HTML 代码中没有“class”属性，则返回 null 而不是空列表。

2. 如果它不为空，.remove()方法可能会中止脚本执行，如果指定的类名不在classList返回的列表中，所以我必须检查这一点，然后它开始工作：

   if (element.classList.contains("className"))    
     element.classList.remove("className");

3. 类似.add()方法

   可能会添加两次类名，所以.remove()只删除一个，还剩下另一个，所以我不得不添加类似于第2点的检查。

4. （与 Edge 相关）CSS 规则

   可能 比 JavaScript 添加/修改的类或样式具有更高的优先级。

我知道第 1 - 3 点与规范相矛盾，但看起来也像某些浏览器的实现。