点击class为faq-q的元素实现p元素隐藏/显示的方法及jQuery适用性咨询

是否需要使用jQuery？ #

完全不需要，原生JavaScript就能实现该功能，无需额外引入库，更轻量化。如果你的项目中已经引入了jQuery，用它实现也可以，代码会更简洁。

实现原理 #

核心逻辑是监听.faq-q元素的点击事件，在触发点击时切换对应答案元素（.faq-ans）的显示状态。常见两种实现思路：

• 直接操作DOM元素的style.display属性，在none（隐藏）和block（显示）之间切换；
• 通过添加/移除自定义CSS类（比如.hidden）控制显示隐藏——这种方式实现样式与逻辑分离，后期维护和修改样式更方便，更推荐。

具体实现代码 #

方案一：原生JavaScript实现 #

首先在现有CSS基础上添加控制隐藏的类：

.faq-ans.hidden {
    display: none;
}

然后编写JS代码：

// 获取所有FAQ标题元素
const faqQuestions = document.querySelectorAll('.faq-q');

faqQuestions.forEach(question => {
    // 给每个标题绑定点击事件
    question.addEventListener('click', function() {
        // 定位当前标题所属FAQ项中的答案元素
        const answer = this.closest('.faq-item').querySelector('.faq-ans');
        // 切换隐藏类，实现显示/隐藏切换
        answer.classList.toggle('hidden');
    });
});

方案二：jQuery实现 #

同样先添加隐藏类的CSS（和上述一致），再编写jQuery代码：

$('.faq-q').on('click', function() {
    $(this).closest('.faq-item').find('.faq-ans').toggleClass('hidden');
});

补充说明 #

• closest('.faq-item')：确保只定位到当前点击标题所在的FAQ容器，避免误操作其他FAQ项的答案；
• classList.toggle() / toggleClass()：自动判断元素是否存在指定类，存在则移除（显示答案），不存在则添加（隐藏答案），一键完成切换；
• 若不想使用CSS类，也可直接修改元素样式，但不推荐这种耦合方式：

  // 原生JS示例
  answer.style.display = answer.style.display === 'none' ? 'block' : 'none';
  

内容的提问来源于stack exchange，提问作者user19992646