javascript - 修复 Vanilla JS Accordion 以一次展开一个选项卡

我有这个 Accordion 工作，但是，我试图弄清楚如何一次只展开一个(单击另一个选项卡，另一个关闭)。我尝试了不同的方法来删除类，但没有得到想要的结果。我也一直在尝试将 for 循环重构为 ES6 标准，但这不太重要。

样式是 Sass，所以不会在 JSFiddle 中正确输出。

const acc = document.querySelector('#accordion');
if (acc === null) {

} else {
    let accordianHeaders = acc.querySelectorAll('header');
    let size = accordianHeaders.length;
    for (i = 0; i < size; i++) {
        accordianHeader = accordianHeaders[i];
        accordianHeader.setAttribute('class', 'toggle');
        accordianHeader.nextElementSibling.setAttribute('class', '');
        accordianHeader.onclick = function() {
            if (this.getAttribute('class') == 'toggle') {
                this.setAttribute('class', 'toggle-active');
                this.nextElementSibling.setAttribute("class", 'active');
                this.previousElementSibling.removeAttribute('class', 'active');
            } else {
                this.setAttribute('class', '');
                this.nextElementSibling.setAttribute('class', '');
            }
        }
    }
}

#accordion {
    padding-top: 25%;
    overflow: hidden;
    li {
        width: 100%;
        list-style-type: none;
    }
    header {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
        overflow: hidden;
        background-color: blue;
        max-width: 500px;
        padding: 10px;
    }
    i {
        width: 10%;
        color: white;
    }
    h3 {
        margin: 0;
        width: 90%;
        color: white;
    }

    article {
        max-height: 0;
        overflow: hidden;
        max-width: 600px;
        transition: 500ms max-height ease;
        &.active {
            max-height: 1000px;
        }
    }
    .toggle-active {
        i:before {
            content: "\f106";
        }
    }
}

<ul id="accordion">
    <li>
        <header>
            <i class="fa fa-angle-down"></i>
            <h3>List 1</h3>
        </header>
        <article>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </article>
    </li>
    <li>
        <header>
            <i class="fa fa-angle-down"></i>
            <h3>List 2</h3>
        </header>
        <article>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </article>
    </li>
    <li>
        <header>
            <i class="fa fa-angle-down"></i>
            <h3>List 3</h3>
        </header>
        <article>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </article>
    </li>
</ul>

最佳答案

这是另一个尝试，使用你的类(因为我看到你正在使用过渡，所以我猜你想保留你的动画)。

const acc = document.querySelector('#accordion');
if (acc !== null) {
    const accordianHeaders = acc.getElementsByTagName('header');
    let accordianActive = null;
    [...accordianHeaders].forEach(h => h.addEventListener('click', i => {
      // on currently active accordian, remove `toggle-active` from header and `active` from article
      accordianActive && accordianActive.classList.remove('toggle-active');
      accordianActive && accordianActive.nextElementSibling.classList.remove('active');
      // set currently active accordian to clicked one, and apply classes
      accordianActive = i.currentTarget;
      accordianActive.classList.add('toggle-active');
      accordianActive.nextElementSibling.classList.add('active');
    }));
}

关于我的实现的一些注意事项:

我尊重你使用的 #accordion 选择器。虽然我不建议使用 id 来匹配 CSS(BEM 方法不建议这样做)。

我不会从所有其他标签中删除类，我使用一个变量来跟踪当前事件的标签。也许这种方式性能更高一些。

我已将您的 SASS 转换为 CSS 以使代码段起作用。当然，您可以使用原始的 SASS 代码。

const acc = document.querySelector('#accordion');
if (acc !== null) {
    const accordianHeaders = acc.getElementsByTagName('header');
    let accordianActive = null;
    [...accordianHeaders].forEach(h => h.addEventListener('click', i => {
      // on currently active accordian, remove `toggle-active` from header and `active` from article
      accordianActive && accordianActive.classList.remove('toggle-active');
      accordianActive && accordianActive.nextElementSibling.classList.remove('active');
      // set currently active accordian to clicked one, and apply classes
      accordianActive = i.currentTarget;
      accordianActive.classList.add('toggle-active');
      accordianActive.nextElementSibling.classList.add('active');
    }));
}

#accordion {
  padding-top: 25%;
  overflow: hidden;
}
#accordion li {
  width: 100%;
  list-style-type: none;
}
#accordion header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  overflow: hidden;
  background-color: blue;
  max-width: 500px;
  padding: 10px;
}
#accordion i {
  width: 10%;
  color: white;
}
#accordion h3 {
  margin: 0;
  width: 90%;
  color: white;
}
#accordion article {
  max-height: 0;
  overflow: hidden;
  max-width: 600px;
  transition: 500ms max-height ease;
}
#accordion article.active {
  max-height: 1000px;
}
#accordion .toggle-active i:before {
  content: "\f106";
}

<ul id="accordion">
    <li>
        <header>
            <i class="fa fa-angle-down"></i>
            <h3>List 1</h3>
        </header>
        <article>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </article>
    </li>
    <li>
        <header>
            <i class="fa fa-angle-down"></i>
            <h3>List 2</h3>
        </header>
        <article>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </article>
    </li>
    <li>
        <header>
            <i class="fa fa-angle-down"></i>
            <h3>List 3</h3>
        </header>
        <article>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </article>
    </li>
</ul>

关于javascript - 修复 Vanilla JS Accordion 以一次展开一个选项卡，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/50401182/