点击链接显示对应div并隐藏其余div的实现方法咨询

1. 核心思路 #

不需要把答案div统一放到页面末尾，直接将每个答案div放在对应问题链接的同级后方即可，DOM的自然流就会让显示的答案自动出现在问题正下方，不需要额外定位。

2. 代码实现 #

HTML结构示例 #

<!-- 问答组1 -->
<a href="javascript:;" class="question">问题1：如何实现点击展开对应答案？</a>
<div class="answer">
  答案1：直接将答案DOM放在对应问题后方，通过jQuery匹配相邻元素即可实现。
</div>

<!-- 问答组2 -->
<a href="javascript:;" class="question">问题2：必须把答案放在页面末尾吗？</a>
<div class="answer">
  答案2：不需要，放在对应问题下方更符合语义，也更容易维护。
</div>

<!-- 可继续添加更多问答组 -->

CSS样式（默认隐藏答案） #

/* 问题链接样式可自定义 */
.question {
  display: block;
  margin: 10px 0;
  color: #2d64b3;
  cursor: pointer;
}

/* 答案默认隐藏，加样式区分层级 */
.answer {
  display: none;
  padding: 0 0 15px 15px;
  color: #333;
  border-left: 2px solid #eee;
}

jQuery交互逻辑 #

// 引入jQuery后执行
$(function() {
  // 绑定问题点击事件
  $('.question').on('click', function(e) {
    // 阻止a标签默认跳转行为
    e.preventDefault();
    // 获取当前问题对应的答案元素
    const $currentAnswer = $(this).next('.answer');
    // 隐藏除当前答案外的所有其他答案
    $('.answer').not($currentAnswer).hide();
    // 切换当前答案的显示/隐藏状态，不需要收起功能可替换为$currentAnswer.show()
    $currentAnswer.toggle();
  })
})

3. 适配调整说明 #

如果你的问题链接不是和答案直接同级相邻，比如问题包裹在<h3>、<div>等容器内，只需要调整选择器即可，比如问题在<div class="q-box">里，答案是同级下一个<div class="a-box">，就把$(this).next('.answer')改成$(this).closest('.q-box').next('.a-box')即可。

4. 纯CSS实现方案（无需jQuery） #

如果不想使用JS，也可以用CSS的:target伪类实现，缺点是默认不支持点击第二次收起答案：

<a href="#answer1" class="question">问题1：xxx</a>
<div id="answer1" class="answer">答案1：xxx</div>

<a href="#answer2" class="question">问题2：xxx</a>
<div id="answer2" class="answer">答案2：xxx</div>

.answer {
  display: none;
}
.answer:target {
  display: block;
}

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