jQueryにおけるtoggale()関数の使用例
今日は面白い例に会ったらメモしてください。
一級メニューの中には二級メニューがあります。二級メニューはアンカーポイントでページ要素をリンクしています。達成したい効果は、アンカーポイントをクリックすると、ページが該当アンカーポイントにリンクし、同時に2級メニューが隠れて、もう1級メニューをクリックした時に実行します。
いろんな方法を試してみましたが、最後はjqueryのtoggle関数を読んで実現しました。
toggg le(fn,fn)
クリックするたびに呼び出す関数を切り替えます。
一致する要素をクリックすると、指定された最初の関数がトリガされ、再び同じ要素をクリックすると、指定された2番目の関数がトリガされます。その後のクリックごとに、この2つの関数の順番呼び出しが繰り返されます。
unbind(「click」)を使用して削除することができます。
戻り値
jQuery
パラメータ
fn(Function):奇数回目のクリックで実行する関数。
fn(Function):偶数回目のクリックで実行する関数。
例
テーブルの切り替え
jQueryコード:
一級メニューの中には二級メニューがあります。二級メニューはアンカーポイントでページ要素をリンクしています。達成したい効果は、アンカーポイントをクリックすると、ページが該当アンカーポイントにリンクし、同時に2級メニューが隠れて、もう1級メニューをクリックした時に実行します。
いろんな方法を試してみましたが、最後はjqueryのtoggle関数を読んで実現しました。
//
$(".nav").toggle(function(){
$(".content").slideToggle();
});
//
$(".nav").toggle(function(){
$(".content").slideDown();
},function(){
$(".content").slideUp();
});
//
$(".nav").click(function(){
$(".content").toggle("slow");
});
toggg()の使用説明を添付します。toggg le(fn,fn)
クリックするたびに呼び出す関数を切り替えます。
一致する要素をクリックすると、指定された最初の関数がトリガされ、再び同じ要素をクリックすると、指定された2番目の関数がトリガされます。その後のクリックごとに、この2つの関数の順番呼び出しが繰り返されます。
unbind(「click」)を使用して削除することができます。
戻り値
jQuery
パラメータ
fn(Function):奇数回目のクリックで実行する関数。
fn(Function):偶数回目のクリックで実行する関数。
例
テーブルの切り替え
jQueryコード:
$("td").toggle(
function () {
$(this).addClass("selected");
},
function () {
$(this).removeClass("selected");
}
);
補足:toggaleはクリックする時だけ有効で、hoverはマウスを移動して移動するイベントで、クリックと関係がありません。二つは一緒に使えます。