Javascript jQuery Accordion一次只打开一个选项卡

我在用的手风琴。需要对其进行一些修改，即每次只打开一个选项卡

HTML

<div class="container">
      <h1 class="heading-primary">CSS Responsive Animated Accordion</h1>
      <div class="accordion">
        <dl>
          <dt>
            <a href="#accordion1" aria-expanded="false" aria-controls="accordion1" class="accordion-title accordionTitle js-accordionTrigger">
              First Accordion heading</a>
          </dt>
          <dd class="accordion-content accordionItem is-collapsed" id="accordion1" aria-hidden="true">
            <p>Some data in first tab.</p>
          </dd>
          <dt>
            <a href="#accordion2" aria-expanded="false" aria-controls="accordion2" class="accordion-title accordionTitle js-accordionTrigger">
              Second Accordion heading</a>
          </dt>
          <dd class="accordion-content accordionItem is-collapsed" id="accordion2" aria-hidden="true">
            <p>Some data in second tab.</p>
          </dd>
        </dl>
      </div>
 </div>

动画手风琴
第一个选项卡中的一些数据

第二个选项卡中有一些数据

JS

$(document).ready(function () {

var d = document,
  accordionToggles = d.querySelectorAll('.js-accordionTrigger'),
  setAria,
  setAccordionAria,
  switchAccordion,
  touchSupported = ('ontouchstart' in window),
  pointerSupported = ('pointerdown' in window);
skipClickDelay = function (e) {
    e.preventDefault();
    e.target.click();
}

setAriaAttr = function (el, ariaType, newProperty) {
    el.setAttribute(ariaType, newProperty);
};

setAccordionAria = function (el1, el2, expanded) {
    switch (expanded) {
        case "true":
            setAriaAttr(el1, 'aria-expanded', 'true');
            setAriaAttr(el2, 'aria-hidden', 'false');
            break;
        case "false":
            setAriaAttr(el1, 'aria-expanded', 'false');
            setAriaAttr(el2, 'aria-hidden', 'true');
            break;
        default:
            break;
    }
};

switchAccordion = function (e) {
    e.preventDefault();
    var thisAnswer = e.target.parentNode.nextElementSibling;
    var thisQuestion = e.target;

    if (thisAnswer.classList.contains('is-collapsed')) {
        setAccordionAria(thisQuestion, thisAnswer, 'true');
    } else {
        setAccordionAria(thisQuestion, thisAnswer, 'false');
    }

    thisQuestion.classList.toggle('is-collapsed');
    thisQuestion.classList.toggle('is-expanded');
    thisAnswer.classList.toggle('is-collapsed');
    thisAnswer.classList.toggle('is-expanded');

    thisAnswer.classList.toggle('animateIn');
};


for (var i = 0, len = accordionToggles.length; i < len; i++) {
    if (touchSupported) {
        accordionToggles[i].addEventListener('touchstart', skipClickDelay, false);
    }
    if (pointerSupported) {
        accordionToggles[i].addEventListener('pointerdown', skipClickDelay, false);
    }
    accordionToggles[i].addEventListener('click', switchAccordion, false);
}
});

$（文档）.ready（函数（）{
var d=文件，
accordionToggles=d.querySelectorAll（'.js accordionTrigger'），
狗尾草，
Set手风琴，
手风琴，
touchSupported=（窗口中的“ontouchstart”），
pointerSupported=（“pointerdown”在窗口中）；
skipClickDelay=功能（e）{
e、 预防默认值（）；
e、 target.click（）；
}
setAriaAttr=函数（el、ariaType、newProperty）{
el.setAttribute（ariaType，newProperty）；
};
SetAccordinaria=函数（el1、el2、扩展）{
交换机（扩展）{
案例“真”：
setAriaAttr（el1，'aria expanded'，'true'）；
setAriaAttr（el2，'aria hidden'，'false'）；
打破
案例“假”：
setAriaAttr（el1，'aria expanded'，'false'）；
setAriaAttr（el2，'aria hidden'，'true'）；
打破
违约：
打破
}
};
开关手风琴=功能（e）{
e、 预防默认值（）；
var thisAnswer=e.target.parentNode.nextElementSibling；
var thisQuestion=e.target；
if（thisAnswer.classList.contains（'is-collapsed'））{
SetAccordinaria（这个问题，这个答案，'正确'）；
}否则{
SetAccordinaria（这个问题，这个答案，'假'）；
}
thisQuestion.classList.toggle（'is-collapsed'）；
thisQuestion.classList.toggle（'is-expanded'）；
thisAnswer.classList.toggle（'is-collapsed'）；
thisAnswer.classList.toggle（'is-expanded'）；
thisAnswer.classList.toggle（'animateIn'）；
};
对于（变量i=0，len=accordiontogles.length；i

---

如果这让事情变得简单，“我只需要两个选项卡”“我一直在尝试，但没有成功。我遗漏了什么？

所以我终于写出了一些代码

JS-大部分代码未更改

$(document).ready(function () {

    var d = document,
        accordionToggles = d.querySelectorAll('.js-accordionTrigger'),
        touchSupported = ('ontouchstart' in window),
        pointerSupported = ('pointerdown' in window),

        skipClickDelay = function (e) {
            e.preventDefault();
            e.target.click();
        },

        setAriaAttr = function (el, ariaType, newProperty) {
            el.setAttribute(ariaType, newProperty);
        },

        setAccordionAria = function (el1, el2, expanded) {
            switch (expanded) {
                case "true":
                    setAriaAttr(el1, 'aria-expanded', 'true');
                    setAriaAttr(el2, 'aria-hidden', 'false');
                    break;
                case "false":
                    setAriaAttr(el1, 'aria-expanded', 'false');
                    setAriaAttr(el2, 'aria-hidden', 'true');
                    break;
                default:
                    break;
            }
        },

        switchAccordion = function (e) {
            e.preventDefault();
            var thisAnswer = e.target.parentNode.nextElementSibling,
                thisQuestion = e.target,
                // Check if the answer is in collapsed state
                isCollapsed = thisAnswer.classList.contains('is-collapsed');

            // Iterate over all the toggles and collaspse
            // them all and only toggle the current tab
            for (var i = 0; i < accordionToggles.length; i++) {
                var currQuestion = accordionToggles[i],
                    currAnswer = currQuestion.parentNode.nextElementSibling;

                setAccordionAria(currQuestion, currAnswer, 'false');

                currQuestion.classList.add('is-collapsed');
                currQuestion.classList.remove('is-expanded');
                currAnswer.classList.add('is-collapsed');
                currAnswer.classList.remove('is-expanded');

                currAnswer.classList.remove('animateIn');

            }

            if (isCollapsed) {
                setAccordionAria(thisQuestion, thisAnswer, 'true');

                thisQuestion.classList.add('is-expanded');
                thisQuestion.classList.add('is-collapsed');
                thisAnswer.classList.add('is-expanded');
                thisAnswer.classList.remove('is-collapsed');
                thisAnswer.classList.add('animateIn');
            }
        };


    for (var i = 0, len = accordionToggles.length; i < len; i++) {
        if (touchSupported) {
            accordionToggles[i].addEventListener('touchstart', skipClickDelay, false);
        }
        if (pointerSupported) {
            accordionToggles[i].addEventListener('pointerdown', skipClickDelay, false);
        }
        accordionToggles[i].addEventListener('click', switchAccordion, false);
    }
});

$（文档）.ready（函数（）{
var d=文件，
accordionToggles=d.querySelectorAll（'.js accordionTrigger'），
touchSupported=（窗口中的“ontouchstart”），
pointerSupported=（窗口中的“pointerdown”），
skipClickDelay=功能（e）{
e、 预防默认值（）；
e、 target.click（）；
},
setAriaAttr=函数（el、ariaType、newProperty）{
el.setAttribute（ariaType，newProperty）；
},
SetAccordinaria=函数（el1、el2、扩展）{
交换机（扩展）{
案例“真”：
setAriaAttr（el1，'aria expanded'，'true'）；
setAriaAttr（el2，'aria hidden'，'false'）；
打破
案例“假”：
setAriaAttr（el1，'aria expanded'，'false'）；
setAriaAttr（el2，'aria hidden'，'true'）；
打破
违约：
打破
}
},
开关手风琴=功能（e）{
e、 预防默认值（）；
var thisAnswer=e.target.parentNode.nextElementSibling，
这个问题=目标，
//检查答案是否处于折叠状态
isCollapsed=thisAnswer.classList.contains（'is-collapsed'）；
//迭代所有切换和折叠
//它们都是，并且只切换当前选项卡
对于（变量i=0；i

我已经重构了代码，并使用jQuery重新编写了代码，这将节省大量代码行。但它仍然可以优化

jQuery

$(document).ready(function () {

    var d = document,
        $accordionToggles = $('.js-accordionTrigger'),
        touchSupported = ('ontouchstart' in window),
        pointerSupported = ('pointerdown' in window),

        skipClickDelay = function (e) {
            e.preventDefault();
            e.target.click();
        },

        setAriaAttr = function (el, ariaType, newProperty) {
            el[0].setAttribute(ariaType, newProperty);
        },

        setAccordionAria = function (el1, el2, expanded) {
            setAriaAttr(el1, 'aria-expanded', expanded ? true : false);
            setAriaAttr(el2, 'aria-expanded', expanded ? false : true);
        },

        switchAccordion = function (e) {
            e.preventDefault();

            var $this = $(this),
                $thisQuestion = $this,
                $thisAnswer = $this.closest('dt').next('dd'),
                // Check if the answer is in collapsed state
                isCollapsed = $thisAnswer.hasClass('is-collapsed');

            // Iterate over all the toggles and collaspse
            // them all and only toggle the current tab
            for (var i = 0; i < $accordionToggles.length; i++) {
                var $currQuestion = $accordionToggles.eq(i),
                    $currAnswer = $currQuestion.closest('dt').next('dd');

                setAccordionAria($currQuestion, $currAnswer, false);

                $currQuestion.addClass('is-collapsed').removeClass('is-expanded');
                $currAnswer.addClass('is-collapsed').removeClass('is-expanded animateIn');
            }

            if (isCollapsed) {
                setAccordionAria($thisQuestion, $thisAnswer, true);

                $thisQuestion.addClass('is-expanded is-collapsed');
                $thisAnswer.addClass('is-expanded animateIn').removeClass('is-collapsed');
            }
        };

    // Assign the click events using jQuery

    if (touchSupported) {
        $accordionToggles.on('touchstart', skipClickDelay);
    }
    if (pointerSupported) {
        $accordionToggles.on('pointerdown', skipClickDelay);
    }
    $accordionToggles.on('click', switchAccordion);
});

$（文档）.ready（函数（）{
var d=文件，
$accordionToggles=$（'.js accordionTrigger'），
touchSupported=（窗口中的“ontouchstart”），
pointerSupported=（窗口中的“pointerdown”），
skipClickDelay=功能（e）{
e、 预防默认值（）；
e、 目标。单击（）