マーキーとリストを切り替える
次に、展開パネル部分を作りましょう。先ほど説明したように、liscrollはリストタグの項目をスクロール表示していますので、クリックするとマーキーとリスト表示を切り替えるようにしましょう。ただ、liscrollにそのような機能があれば簡単なのですが、残念ながらありません。また、スクロールを停止させたり、一時的に機能を解除するといったこともできません。
そこで、liscrollを組み込む前にリスト項目の複製を作っておき、クリックされるたびに表示/非表示を切り替えるようにします。リスト項目の複製を作ったら、ID名を新しいものに変更し、非表示にしておきます。これらの処理は以下のスクリプトで実現できます。
$("#newslist").clone().attr("id", "newslist2").insertAfter("#openlist").hide();
この後、liscrollを組み込みます。
$("#newslist").liScroll({travelocity: 0.04});
次に、クリックされたらマーキーとリスト表示を切り替える、という処理です。jQueryライブラリにはクリックされる度に処理を切り替える「toggle()」メソッドがあります。交互に切り替えるので、関数を2つパラメータに書いておきます。それぞれの関数内で、マーキーとリスト項目を表示する、しないを設定すればできあがりです。
$("#openlist").toggle(
function(){
$("#newslist").hide();
$("#newslist2").show();
$(".tickercontainer").hide();
},function(){
$("#newslist").show();
$("#newslist2").hide();
$(".tickercontainer").show();
}
);