使用JS控制手风琴

Question

我一直在玩弄 Bootstrap 的手风琴功能并学习了很多有关如何使用它的知识。但是，我一直遇到困难的一件事：

我正在为教室制作网页。我的目标是制作一个手风琴，其中第一个选项卡打开，学生在选项卡内执行任务。当他们得到正确答案时，他们被允许打开第​​二个标签，依此类推。换句话说，我想使用 JS 或 JQuery 来锁定手风琴的后续选项卡，但无法弄清楚如何做到这一点。

希望我的问题很清楚！

Answer 1

在这里查看 js 手风琴：https://codepen.io/onlintool24/pen/LYzevEq

    var accItem = document.getElementsByClassName('accordionItem');
    var accHD = document.getElementsByClassName('accordionItemHeading');
    for (i = 0; i < accHD.length; i++) {
        accHD[i].addEventListener('click', toggleItem, false);
    }
    function toggleItem() {
        var itemClass = this.parentNode.className;
        for (i = 0; i < accItem.length; i++) {
            accItem[i].className = 'accordionItem close';
        }
        if (itemClass == 'accordionItem close') {
            this.parentNode.className = 'accordionItem open';
        }
    }

.accordionWrapper{padding:30px;background:#fff;float:left;width:80%;box-sizing:border-box;margin:10%; }
.accordionItem{
    float:left;
    display:block;
    width:100%;
    box-sizing: border-box;
    font-family:'Open-sans',Arial,sans-serif;
}
.accordionItemHeading{
    cursor:pointer;
    margin:0px 0px 10px 0px;
    padding:20px;
    background:#c2cfd826;
    color:#000;
    width:100%;
    -webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
        box-sizing: border-box;
        font-weight: 600;
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 2px;
    line-height: 1.2em;
}
.close .accordionItemContent{
    height:0px;
    transition:height 1s ease-out;
    -webkit-transform: scaleY(0);
    -o-transform: scaleY(0);
    -ms-transform: scaleY(0);
    transform: scaleY(0);
    float:left;
    display:block;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 2px;
    line-height: 1.2em;
    
}
.open .accordionItemContent{
        padding: 20px;
    background-color: #7cda24;
    color:white;
    width: 100%;
    margin: 0px 0px 10px 0px;
    display:block;
    -webkit-transform: scaleY(1);
    -o-transform: scaleY(1);
    -ms-transform: scaleY(1);
    transform: scaleY(1);
    -webkit-transform-origin: top;
    -o-transform-origin: top;
    -ms-transform-origin: top;
    transform-origin: top;

    -webkit-transition: -webkit-transform 0.4s ease-out;
    -o-transition: -o-transform 0.4s ease;
    -ms-transition: -ms-transform 0.4s ease;
    transition: transform 0.4s ease;
        box-sizing: border-box;
        border-bottom-right-radius: 30px;
        padding-top: 1px;
}

.open .accordionItemHeading{
    margin:0px;
        -webkit-border-top-left-radius: 3px;
    -webkit-border-top-right-radius: 3px;
    -moz-border-radius-topleft: 3px;
    -moz-border-radius-topright: 3px;
    border-top-left-radius: 30px;
    border-top-right-radius: 3px;
    -webkit-border-bottom-right-radius: 0px;
    -webkit-border-bottom-left-radius: 0px;
    -moz-border-radius-bottomright: 0px;
    -moz-border-radius-bottomleft: 0px;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
    background-color: #7cda24;
    color:white;
}
h2.accordionItemHeading {
    border-radius: 30px 0 30px 0;
}

<div class="accordionWrapper">
<div class="accordian">
<div class="accordionItem open">
      <h2 class="accordionItemHeading">WHEN EXACTLY WILL I RECEIVE THIS PRODUCT?</h2>
      <div class="accordionItemContent">
        <p>Our products are delivered via email and available immediately after purchase! An order confirmation email with a download link will also be sent to the email provided.</p>
      </div>
    </div>

    <div class="accordionItem close">
      <h2 class="accordionItemHeading">WHEN EXACTLY WILL I RECEIVE THIS PRODUCT?</h2>
      <div class="accordionItemContent">
        <p>Our products are delivered via email and available immediately after purchase! An order confirmation email with a download link will also be sent to the email provided.</p>
      </div>
    </div>

    <div class="accordionItem close">
      <h2 class="accordionItemHeading">WHEN EXACTLY WILL I RECEIVE THIS PRODUCT?</h2>
      <div class="accordionItemContent">
        <p>Our products are delivered via email and available immediately after purchase! An order confirmation email with a download link will also be sent to the email provided.</p>
      </div>
    </div>
    
    <div class="accordionItem close">
      <h2 class="accordionItemHeading">WHEN EXACTLY WILL I RECEIVE THIS PRODUCT?</h2>
      <div class="accordionItemContent">
        <p>Our products are delivered via email and available immediately after purchase! An order confirmation email with a download link will also be sent to the email provided.</p>
      </div>
    </div>
    
    <div class="accordionItem close">
      <h2 class="accordionItemHeading">WHEN EXACTLY WILL I RECEIVE THIS PRODUCT?</h2>
      <div class="accordionItemContent">
        <p>Our products are delivered via email and available immediately after purchase! An order confirmation email with a download link will also be sent to the email provided.</p>
      </div>
    </div>
    
    <div class="accordionItem close">
      <h2 class="accordionItemHeading">WHEN EXACTLY WILL I RECEIVE THIS PRODUCT?</h2>
      <div class="accordionItemContent">
        <p>Our products are delivered via email and available immediately after purchase! An order confirmation email with a download link will also be sent to the email provided.</p>
      </div>
    </div>
</div>