javascript - 单击嵌套 div 外部时如何切换子 div Accordion 类？

Question

希望我能解释我想要完成的事情。我正在研究多个 Accordion 。我为每个 Accordion 框创建了一个切换开关。

当我点击父 div "accordion" 时，它应该将事件类添加到 accordion-content div

但是，我不希望我不知道我在这里做错了什么。我想单击 "accordion__top" 栏并仅切换内容类别。

但是我有一些嵌套问题。

此外，如果我切换下一个 Accordion，如何删除之前的事件类？

我的代码:

(() => {
    const Accordions = document.querySelectorAll('.accordion');

    if (!Accordions.length) {
        return;
    }

    const handleAccordion = accordion => {
        const AccordionContent = accordion.querySelector('.accordion__content');
        AccordionContent.classList.toggle('accordion__content--active');
        console.log(accordion);
    };

    Accordions.forEach((accordion, index) => {
        const bindAccordion = handleAccordion.bind(null, accordion, index);
        accordion.addEventListener('click', bindAccordion);
    });
})();

HTML:

<div class="accordion">
    <div class="accordion__box accordion__box--tertiary">
        <div class="accordion__top">
            <h2 class="accordion__title">Join the collab</h2>
            <span class="accordion__toggle accordion__toggle--primary"></span>
        </div>
        <div class="accordion__content">
            <p>Coolhaven Collab heeft wil zoveel mogelijk partners in de performance arts aanhaken. Hoe meer hoe beter. <br />
            Ben je coach, heb je een culturele locatie in Coolhaven of geef je bijvoorbeeld dans, zangof theater lessen? Laat je gegevens achter, dan nemen wij contact met je op.</p>
        </div>
    </div>
</div>

Answer 1

我很难理解您要实现的目标。

你提到你想点击 "accordion" 类来切换内容，你在下面提到你想点击 "accordion__top"切换内容。

你不提什么是行不通的？

编辑，更新片段

(() => {
    const Accordions = document.querySelectorAll('.accordion__box');

    if (!Accordions.length) {
        return;
    }

    const handleAccordion = accordion => {
    		const OtherAccordions = document.querySelectorAll('.accordion__content--active');
        OtherAccordions.forEach((a, index) => {
        	a.classList.remove("accordion__content--active");
   			 });
        const AccordionContent = accordion.querySelector('.accordion__content');
        AccordionContent.classList.toggle('accordion__content--active');
    };

    Accordions.forEach((accordion, index) => {
        const bindAccordion = handleAccordion.bind(null, accordion, index);
        accordion.addEventListener('click', bindAccordion);
    });
})();

.accordion__content{
  height:0;
  overflow:hidden;
}

.accordion__content--active{
  height:auto;
}

<div class="accordion">
    <div class="accordion__box accordion__box--tertiary">
        <div class="accordion__top">
            <h2 class="accordion__title">Join the collab</h2>
            <span class="accordion__toggle accordion__toggle--primary"></span>
        </div>
        <div class="accordion__content">
            <p>Coolhaven Collab heeft wil zoveel mogelijk partners in de performance arts aanhaken. Hoe meer hoe beter. <br />
            Ben je coach, heb je een culturele locatie in Coolhaven of geef je bijvoorbeeld dans, zangof theater lessen? Laat je gegevens achter, dan nemen wij contact met je op.</p>
        </div>
    </div>
    <div class="accordion__box accordion__box--tertiary">
        <div class="accordion__top">
            <h2 class="accordion__title">Join the collab</h2>
            <span class="accordion__toggle accordion__toggle--primary"></span>
        </div>
        <div class="accordion__content">
            <p>Coolhaven Collab heeft wil zoveel mogelijk partners in de performance arts aanhaken. Hoe meer hoe beter. <br />
            Ben je coach, heb je een culturele locatie in Coolhaven of geef je bijvoorbeeld dans, zangof theater lessen? Laat je gegevens achter, dan nemen wij contact met je op.</p>
        </div>
    </div>
</div>

ps 对不起关于 fiddle ，有一个brainfart