jQueryを利用してナビゲーションを実装する
第3回・
本連載では、
今回の記事で使うメソッドの紹介と簡単な説明
本題に入る前に、
click()
clickメソッドは対象のjQueryオブジェクトのclickイベントに任意の関数をbindしていくメソッドです。clickメソッド内では$(this)でイベントを追加するjQueryオブジェクトを指定できます。また、
<button id='sample1'>sample button</button>$(function(){
$('#sample1').click(function(){
console.log($(this).text());
});
});
next()
nextメソッドは対象のjQueryオブジェクトの弟要素(次の要素)を得るメソッドです。
<dl>
<dt>兄要素</dt>
<dd>弟要素</dd>
</dl>$(function(){
console.log($('dt').next());
});
show()、hide()、is()
show、
<dl id="sample2">
<dt>ここをクリック</dt>
<dd>ここの表示非表示が切り替わる</dd>
</dl>$(function(){
$('dt','#sample2').click(function(){
var next = $(this).next();
// nextメソッドで次の要素を得たものにをnextで参照する
if(next.is(':visible')){
// 前回説明した:visibleセレクタを利用して状態を見る
// nextが:visible、つまり表示されているなら非表示に
next.hide();
}else{
// nextが:visibleでなければ、つまり非表示なら表示する
next.show();
}
});
});お気づきの方もいるかもしれませんが、
$(function(){
$('dd','#sample3').hide();
// DD要素を非表示にする
$('dt','#sample3').click(function(){
var next = $(this).next();
if(next.is(':visible')){
next.hide();
}else{
next.show();
}
});
});表示非表示をスライドアニメーションを使って行う
さきほどのサンプルではアニメーションは使わずに、
<dl id="sample3">
<dt>アコーディオンヘッダ</dt>
<dd>アコーディオンコラム</dd>
<dt>アコーディオンヘッダ</dt>
<dd>アコーディオンコラム</dd>
<dt>アコーディオンヘッダ</dt>
<dd>アコーディオンコラム</dd>
</dl>dl {
width: 300px;
}
dt, dd {
padding: 5px;
}
dt {
color: #fff;
background: #252525;
}
dd {
background: #eee;
}$(function(){
$('dt','#sample3').click(function(){
var next = $(this).next().hide();
if(next.is(':visible')){
next.slideUp();
}else{
next.slideDown();
}
});
});ところで、
next.slideUp('fast');
next.slideDown(400);表示するDD要素をひとつにする
次はいずれかのDT要素がクリックされたら、
$(function(){
var dd = $('dd','#sample3');
dd.hide();
$('dt','#sample3').click(function(){
var next = $(this).next();
dd.not(next).slideUp();
if(next.is(':visible')){
next.slideUp();
}else{
next.slideDown();
}
});
});DD要素を指定する機会が増えたので変数から参照できるようにします。同じように何度も$(セレクタ)から要素を取得するのは効率が悪くなるので、
ここではひとつだけ、
not()
notメソッドは対象の要素群から条件に一致しないものを省いた状態で要素を返します。前回、
例えば今回の例では、
これはどういうことかと言うと、
DL以外の要素でアコーディオンを実装する
と言っても、
<div id="sample4">
<h2>アコーディオンヘッダ</h2>
<p>アコーディオンコラム</p>
<h2>アコーディオンヘッダ</h2>
<p>アコーディオンコラム</p>
<h2>アコーディオンヘッダ</h2>
<p>アコーディオンコラム</p>
</div>$(function(){
var p = $('p','#sample4');
p.hide();
$('h2','#sample3').click(function(){
var next = $(this).next();
p.not(next).slideUp();
if(next.is(':visible')){
next.slideUp();
}else{
next.slideDown();
}
});
});基本部分は同じです。このように、
次回はグローバルナビゲーションでよく使われる階層ドロップダウンナビゲーションを実装してみましょう。