小开

您只需迭代两个链接中的锚。

<a href="#hide2" class="hide" id="hide2">+</a>
<a href="#show2" class="show" id="show2">-</a>

看这个 jsfiddle http://jsfiddle.net/eJX8z/

我还在 FAQ 调用中添加了一些空白，以改进格式。

小开

或者一个超级简单的版本，几乎没有任何 css:)

<style>
.faq ul li {
display:block;
float:left;
padding:5px;
}


.faq ul li div {
display:none;
}


.faq ul li div:target {
display:block;
}




</style>




<div class="faq">
<ul>
<li><a href="#question1">Question 1</a>
<div id="question1">Answer 1 </div>
</li>




<li><a href="#question2">Question 2</a>
<div id="question2">Answer 2 </div>
</li>
<li><a href="#question3">Question 3</a>
<div id="question3">Answer 3 </div>
</li>
<li><a href="#question4">Question 4</a>
<div id="question4">Answer 4 </div>
</li>
<li><a href="#question5">Question 5</a>
<div id="question5">Answer 5 </div>
</li>
<li><a href="#question6">Question 6</a>
<div id="question6">Answer 6 </div>
</li>
</ul>
</div>

Http://jsfiddle.net/ionko22/4skd3/

小开

Depending on what browsers/devices you are looking to support, or what you are prepared to put up with for non-compliant browsers you may want to check out the <summary> and <detail> tags. They are for exactly this purpose. No css is required at all as the collapsing and showing are part of the tags definition/formatting.

我举了一个例子给你:

<details>
<summary>This is what you want to show before expanding</summary>
<p>This is where you put the details that are shown once expanded</p>
</details>

浏览器支持多种多样。尝试使用 webkit 获得最佳效果。其他浏览器可能默认显示所有解决方案。您也许可以回退到上面描述的 hide/show 方法。

小开

@ gbtimmon 的回答很棒，但是太复杂了，我已经尽可能简化了他的代码。

#answer,
#show,
#hide:target {
display: none;
}


#hide:target + #show,
#hide:target ~ #answer {
display: inherit;
}

<a href="#hide" id="hide">Show</a>
<a href="#/" id="show">Hide</a>
<div id="answer"><p>Answer</p></div>

小开

使用 `<summary>`和 `<details>`

使用 <summary>和 <details>元素是最简单的，但是请看浏览器支持，因为当前 IE 不支持它。不过，您可以使用填料(大多数是基于 jQuery 的)。请注意，不支持的浏览器当然只会显示扩展版本，所以在某些情况下可能是可以接受的。

/* Optional styling */
summary::-webkit-details-marker {
color: blue;
}
summary:focus {
outline-style: none;
}

<details>
<summary>Summary, caption, or legend for the content</summary>
Content goes here.
</details>

另见如何样式化 <details>元素(HTML5博士) (有点棘手)。

纯 CSS3

:target选择器有一个非常好的浏览器支持，它可以用来在框架内创建一个单身可折叠元素。

.details,
.show,
.hide:target {
display: none;
}
.hide:target + .show,
.hide:target ~ .details {
display: block;
}

<div>
<a id="hide1" href="#hide1" class="hide">+ Summary goes here</a>
<a id="show1" href="#show1" class="show">- Summary goes here</a>
<div class="details">
Content goes here.
</div>
</div>
<div>
<a id="hide2" href="#hide2" class="hide">+ Summary goes here</a>
<a id="show2" href="#show2" class="show">- Summary goes here</a>
<div class="details">
Content goes here.
</div>
</div>

纯 CSS 折叠/扩展 div

使用 <summary>和 <details>

纯 CSS3

使用 `<summary>`和 `<details>`