如何用jQuery实现点击问答页中Q类div切换对应A类div的可见性？

嘿，这个需求用jQuery实现超简单的，我给你捋清楚怎么做：

首先，如果你希望答案默认是隐藏的，可以先给.A加个基础CSS样式：

.A {
  display: none;
}

然后核心的jQuery代码就几行，逻辑很清晰：

// 确保页面DOM加载完成后再执行代码
$(document).ready(function() {
  // 给所有class为"Q"的div绑定点击事件
  $('.Q').on('click', function() {
    // 找到当前点击的问题块后面紧挨着的答案块，切换它的可见性
    $(this).next('.A').toggle();
  });
});

代码解释： #

• $(document).ready()：这一步很重要，能避免因为DOM还没加载完就绑定事件导致找不到元素的问题。
• $('.Q').on('click', function())：给所有问答模块里的问题div绑定点击触发的逻辑。
• $(this)：指代当前被点击的那个具体的问题div，确保我们只操作它对应的答案。
• .next('.A')：精准定位到当前问题后面紧挨着的那个答案div（加.A是为了防止如果后面有其他元素时误操作）。
• .toggle()：jQuery自带的方法，自动切换元素的显示/隐藏状态——当前显示就隐藏，当前隐藏就显示。

如果想要更丝滑的动画效果，把toggle()换成slideToggle()就行，这样展开收起会有滑动的过渡动画：

$(this).next('.A').slideToggle();

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