Question

我已在codepen中this setup之后在我的应用中实现了此动画标签。现在，我想使用vanilla 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中工作，我编写的代码也在另一个浏览器中工作..

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

0 个答案: