时间戳

首页 > 解决方案 > 单击块中的任何位置时如何切换数据内容

javascript - 单击块中的任何位置时如何切换数据内容

问题描述

我正在创建一个常见问题页面，其中包含许多问题，如下所示。活动类添加了下拉内容的功能。使用的脚本是：

const toggles = document.querySelectorAll('.faq-toggle');

    toggles.forEach(toggle => {
        toggle.addEventListener('click', () => {
            toggle.parentNode.classList.toggle('active');
        });
    })

演示：

const toggles = document.querySelectorAll('.faq-toggle');

toggles.forEach(toggle => {
    toggle.addEventListener('click', () => {
        toggle.parentNode.classList.toggle('active');
    });
})
<div class="faq active">
    <h3 class="faq-title">
        Title
    </h3>
    <p class="faq-text">
        Answer
    </p>
    <button class="faq-toggle">
        <i class="fas fa-chevron-down"></i>
        <i class="fas fa-times"></i>
    </button>
</div>

切换功能应用于添加活动类的按钮，从而创建下拉菜单。每当我单击卡片上的任意位置时，我都想显示下拉内容。目前，下拉部分仅在单击按钮时打开。我尝试将 faq-toggle 类添加到主 div 但它不起作用。我如何实现这一目标？

标签： javascripthtmljquerycsstwitter-bootstrap

解决方案

切换整个卡片而不是仅仅定位按钮

无论您单击其中的任何位置还是按钮本身，下面的代码都将切换活动类

const toggles = document.querySelectorAll('.faq');

toggles.forEach(toggle => {
  toggle.addEventListener('click', () => {
    toggle.classList.toggle('active');
  });
})

推荐阅读