使用JavaScript实现内容的折叠与展开效果

"本文将介绍如何使用JavaScript实现内容的收缩与展开功能，主要涉及HTML、CSS和JavaScript的结合应用。" 在网页设计中，有时我们需要为用户提供一种方式来控制内容的显示，例如隐藏或显示详细信息。这可以通过点击一个按钮或链接来实现，这种效果在FAQ（常见问题解答）或文章预览等场景中非常常见。在这个例子中，我们将使用JavaScript，HTML和CSS来创建一个简单的收缩与展开功能。 首先，从HTML结构来看，我们可以看到一个无序列表`<ul>`，其中包含多个`<dl>`元素。每个`<dl>`代表一个问题及其答案，`<dt>`表示问题，`<dd>`表示答案。通过设置CSS样式，我们可以使默认状态下的答案`<dd>`被隐藏（`display:none`），而问题`<dt>`具有可点击性，以便触发展开和收缩动作。 CSS部分设置了基本的页面样式，如边距、字体大小和背景色。`#faqdt`是问题的样式，带有加粗字体和指针光标，表明它可以被点击。而`#faqdd`则是答案的样式，初始状态为不可见，并设置了内边距和背景色。 接下来，JavaScript部分开始发挥作用。首先，我们获取了整个`<dl>`列表，并对每个元素进行遍历。在每个`<dl>`中，我们找到第一个`<dt>`元素，并为其分配一个唯一的ID。然后，我们为`<dt>`添加点击事件监听器。 点击事件处理函数中，我们首先获取当前点击的`<dt>`元素的父节点，即整个`<dl>`元素。然后，我们检查上一次点击的`<dt>`元素是否与当前点击的相同。如果不同，我们就关闭之前被展开的`<dd>`（如果有），并根据当前`<dd>`的显示状态（是否为`none`）来决定是展开还是收缩它。 JavaScript代码中的`lastFaqClick`变量用于记录上一次点击的`<dt>`元素，这样可以实现一次只展开一个答案的效果。当用户点击一个新的问题时，先前展开的答案会自动收起，保持用户界面的整洁。 这个例子展示了如何结合HTML、CSS和JavaScript实现交互式的收缩与展开功能。通过理解这些基础知识，开发者可以创建更多复杂且用户友好的动态网页元素。