JS+CSS案例：实现点击展开隐藏答案的帮助列表

案例图效果图

这也是一个非常实用的小模块，在常见问题，帮助列表，使用说明等需要一问一答形式的展示时候，用途是很广泛的。本篇文章展示了两种展现方式：

• 第一种：每个答案的展开都是互不影响的，这样的好处是当用户需要兼顾阅读多条内容，快速浏览时候，可以任意选择展开和关闭哪个答案。
• 第二种：每个答案的展开是互斥的，即当用户点击展开一条答案时候，会同时关闭其他的答案。这样的好处是，当你的页面问题很多，页面很长时候，它能有效的节省页面空间，减少用户浏览的时间成本。是用户只专注于本条答案本身。

好了，分析完了案例，接下来，我们看看代码是怎么完成的。

HTML结构

<div class="container">
  <h2>点击展开隐藏答案的帮助列表：方式一</h2>
  <div class="help-list">
    <div class="question">问题1: 如何使用JavaScript?</div>
    <div class="answer" style="display:none;">
        答案1: JavaScript 是一种高级的、解释执行的编程语言，用于网页开发...
    </div>
    <div class="question">问题2: 什么是CSS?</div>
    <div class="answer" style="display:none;">
        答案2: CSS 代表层叠样式表，是一种用来为结构化文档（如HTML或XML）添加样式（字体、间距和颜色等）的计算机语言...
    </div>
    <div class="question">问题3: 本方案解析?</div>
    <div class="answer" style="display:none;">
        在这个例子中，我们首先通过querySelectorAll选择了所有的问题元素（.help-list .question）...
    </div>
    <!-- 可以添加更多问题和答案 -->
  </div>
</div>


<div class="container">
  <h2>点击展开隐藏答案的帮助列表：方式二</h2>
  <div class="help-list2">
    <div class="question2">问题1: 如何使用JavaScript?</div>
    <div class="answer2">
        答案1: JavaScript 是一种高级的、解释执行的编程语言，用于网页开发...
    </div>
    <div class="question2">问题2: 什么是CSS?</div>
    <div class="answer2">
        答案2: CSS 代表层叠样式表，是一种用来为结构化文档（如HTML或XML）添加样式（字体、间距和颜色等）的计算机语言...
    </div>
    <div class="question2">问题2: 本方案解析?</div>
    <div class="answer2">
        要实现点击一个问题后关闭其他所有被展开的答案，你需要在JavaScript中添加一些逻辑来跟踪当前展开的答案...
    </div>
    <!-- 可以添加更多问题和答案 -->
  </div>
</div>

CSS样式表（仅用于美化样式）

/* Reset CSS  清除默认样式和浮动 */
*{
  margin: 0;
  position: 0;
}
html {
  margin: 0px !important;
  height: 100%;
  background: #eaeaea;
}
body{
  height: 100%;
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  font-size: 1rem;
  color: #333;
}

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,figure,fieldset,input,textarea,p,blockquote,th,td {
  margin: 0;
  padding: 0;
}

/* 本例样式 */

.container{
  /* 居中 */
  position: relative;  
  left: 20%;
  top: 10%;  
  width:60%;
  background: #fff;
  border-radius: 15px;
  padding: 30px 40px;
  box-sizing: border-box;
  margin-bottom: 30px;
}

h2{
  position: relative;
  font-size: 1.2rem;
  color: #333;
  padding-bottom: 6px;
  margin-bottom: 20px;
  border-bottom: 2px solid #c00;
}


.help-list .question,
.help-list2 .question2 {
  position: relative;
  cursor: pointer;
  margin:10px 0px;
  font-weight: bold;
  padding-left: 26px;
  transition: all .5s;
}

.question:hover,
.question2:hover{
  padding-left: 30px;
  color: #c00;
  transition: all .5s;
}

.question::before,
.question2::before{
  content: 'Q';
  position: absolute;
  color:#fff;
  background: #c00;
  border-radius: 4px;
  font-size:0.8rem ;
  margin-right:10px;
  left: 0;
  top: 2px;
  padding: 1px 4px;
  line-height: 1rem;
}

.help-list2 .answer2,
.help-list .answer {
  font-size: 0.9rem;
  line-height: 1.4rem;
  display: none;
  margin-left: 36px;
  margin-bottom: 20px;
  color: #666;
}

JS代码

// 第一种方式 
// 获取所有的问题元素
const questions = document.querySelectorAll('.help-list .question');

// 为每个问题元素添加点击事件监听器
questions.forEach(question => {
    question.addEventListener('click', function() {
        // 找到当前问题元素后面的第一个答案元素
        const answer = this.nextElementSibling;
        
        // 切换答案的显示状态
        if (answer.style.display === 'none') {
            answer.style.display = 'block';
        } else {
            answer.style.display = 'none';
        }
    });
});

在这个例子中，我们首先通过querySelectorAll选择了所有的问题元素（.help-list .question），然后遍历这些元素并为它们各自添加了一个点击事件监听器。当点击一个问题时，我们找到紧接着这个问题元素的下一个元素（即答案），并切换其display样式属性来实现展开和隐藏的效果。

注意：这个例子假设每个问题后面紧跟着的就是其对应的答案，且答案的HTML元素紧挨着问题元素。如果你的HTML结构有所不同，可能需要调整JavaScript代码来正确地找到答案元素。

// 第二种方式 
// 获取所有的问题和答案元素
const questions2 = document.querySelectorAll('.help-list2 .question2');
const answers2 = document.querySelectorAll('.help-list2 .answer2');

// 为每个问题元素添加点击事件监听器
questions2.forEach((question2, index) => {
    question2.addEventListener('click', function() {
        // 关闭所有答案
        answers2.forEach(answer2 => {
            answer2.style.display = 'none';
        });

        // 显示当前问题的答案
        const answer2 = this.nextElementSibling;
        answer2.style.display = 'block';
    });
});

要实现点击一个问题后关闭其他所有被展开的答案，你需要在JavaScript中添加一些逻辑来跟踪当前展开的答案，并在需要时关闭它们。我们首先通过querySelectorAll获取了所有的问题和答案元素，并将它们分别存储在questions和answers数组中。然后，我们为每个问题元素添加了一个点击事件监听器。在监听器的回调函数中，我们首先遍历所有的答案元素，并将它们的display样式设置为'none'来关闭它们。之后，我们找到当前被点击问题元素的下一个元素（即答案），并将其display样式设置为'block'来展开它。这样，无论你之前打开了哪个答案，点击新的问题时，它都会关闭所有其他答案并仅显示当前问题的答案。

谢幕

至此，这篇文章完成了。希望对新入行的小伙伴有所帮助。