これはあなたが示したものとは少し異なりますが、ここで私に固執してください.
コンテンツがアコーディオン/折り畳み式のコンテンツ リスト スタイルの構成のように開く場合、実際には s などを使用した面倒な作業はすべて必要ありませんid。これが 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>
注意してください、私はクレイジーな s のすべてをデモンストレーションしているわけではなく、クラスidを実装しました。content私の例では<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ていない場合(およびトラバーサルが非生産的である場合) は、要素の一部内で参照を使用することもできます。Prodigitalson は を使用してデモンストレーションを行い、それを jQuery に入力して現在の を選択するようにしました。$.next().contenthref="#myContent1"$(this.href).contentid
形式を使用して、別の方法を示し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です。簡単です。