时间戳

首页 > 解决方案 > 单击嵌套 div 外部时如何切换子 div 手风琴类？

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

问题描述

希望我能解释我想要完成的工作。我正在制作多个手风琴。我为每个 Accordion 框创建了一个切换开关。

当我单击父 div “手风琴”时，它应该将活动类添加到手风琴内容 div

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

但我有一些嵌套问题。

另外，如果我切换下一个手风琴，如何删除以前的活动课程？

我的代码：

(() => {
    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>

标签： javascript

解决方案

我很难理解您要达到的目标。

您提到要单击“手风琴”类来切换内容，并且您在下面提到要单击“手风琴__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 对小提琴感到抱歉，脑子有问题

推荐阅读