jQuery 手风琴一次只打开一个标签

Question

我正在使用 HERE 的手风琴。其中需要稍作修改，即一次只打开一个标签。

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);
}
});

如果这让事情变得简单，那么“我只需要两个标签”我一直在尝试但没有成功。我错过了什么？

Answer 1

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

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);
    }
});

Check Fiddle

我重构了代码并使用 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);
});

jQueryFiddle

jQuery 手风琴一次只打开一个标签

jQuery Accordion Open only one tab at a time

html

javascript

jquery

jquery-ui-accordion