这与您所展示的有点不同，但请在这里坚持。
如果内容像手风琴/折叠内容列表样式配置一样打开，您实际上不需要所有带有ids 之类的东西。这就是 jQuery 的奇妙之处：它让遍历触手可及。
所以这实际上很容易：
<div class="questions">
<span>+</span>
<a href="#">text</a>
</div>
<div class="content">
<p>some text</p>
</div>
<div class='questions'>
<span>+</span>
<a href="#">text</a>
</div>
<div class="content">
<p>some text</p>
</div>
请注意，我并没有展示所有的疯狂ids，并且我已经实现了一个content类。在我的示例中，我也使用 a<span>+</span>而不是图像作为切换箭头，但这只是因为我认为没有必要证明这一点。如果你想让我解释一下，请告诉我。
CSS的唯一相关部分：
.content {
display: none;
}
这里我们有（非常非常简单的）jQuery：
jQuery(function load(){
var $questions = $('.questions'),
$content = $('.content');
$questions.on('click', function toggle(){
var $this = $(this),
$selected = $this.next('.content');
$content.not($selected).hide();
$selected.show();
$questions.not(this).find('span').text('+');
$this.find('span').text('-');
return false;
});
});
http://jsfiddle.net/userdude/5t2Un/
所以我所做的是...
// jQuery(); is a shortcut to $(document).ready()
jQuery(function load(){
// I'm going to cache my elements for later.
// I can also use $() inside this function.
var $questions = $('.questions'),
$content = $('.content');
// Here I'm going to detect a click on a `div.questions`,
// and use this as my toggle.
$questions.on('click', function toggle(){
var $this = $(this),
// Notice I'm using `$.next('.content'). This is
// how I select the appropriate `.content` for the
// question.
$selected = $this.next('.content');
// Hide all content but what was selected by $.next()
$content.not($selected).hide();
// Now show the $this.next('.content'), which we've
// saved a reference to $selected.
$selected.show();
// Toggling the + and -. You can do an $.addClass()
// and $.removeClass() on the element here.
$questions.not(this).find('span').text('+');
$this.find('span').text('-');
// Return false in case an ANCHOR was clicked, which
// will cancel any navigation.
return false;
});
});
编辑
现在，如果.questions它们$.next()与它们无关.content（并且遍历会适得其反），您还可以在元素的某些部分中使用引用。Prodigitalson 演示了 using href="#myContent1"，他将其提供给 jQuery 喜欢$(this.href)选择当前.content的 by id。
我将演示另一种方法，使用data-格式。
<div class="container nav-bar">
<div class="questions" data-content-id="#myContent1">
<span>+</span>
<a href="#">text</a>
</div>
<div class='questions' data-content-id="#myContent2">
<span>+</span>
<a href="#">text</a>
</div>
<div class='questions' data-content-id="#myContent3">
<span>+</span>
<a href="#">text</a>
</div>
<div class='questions' data-content-id="#myContent4">
<span>+</span>
<a href="#">text</a>
</div>
<div class='questions' data-content-id="#myContent5">
<span>+</span>
<a href="#">text</a>
</div>
</div>
注意这部分：
<div class="questions" data-content-id="#myContent1">
现在我将使用它$.data()：
$(function load() {
var $questions = $('.questions'),
$content = $('.content');
$questions.on('click', function toggle() {
var $this = $(this),
$selected = $($this.data('content-id'));
$content.not($selected).hide();
$selected.show();
$questions.not(this).find('span').text('+');
$this.find('span').text('-');
return false;
});
});
http://jsfiddle.net/userdude/VCnQn/
这与我之前展示的方法基本相同，除了：
$selected = $($this.data('content-id'));
这就是我们如何在.questions和之间建立关联.content。很容易。