過去3回で jQuery の基本的な書き方について勉強してきました。
今回からは、より実践的かつ利用頻度の高いスクリプトを、実際に書いてみて動きを確認していきましょう。
格納されたメニューをスライド開閉させるメソッドを使います。
まずはメニューを準備します
See the Pen
Untitled by taichi (@taichi_na)
on CodePen.
よくスマホサイトの右上についているような開閉するメニューを実現させることができるメソッドを使ってみましょう。
まずは上の例のようにボタンとメニューを用意します。
※初心者の人にもわかりやすくするために、装飾は最低限にしています。
そして、デフォルトの状態ではメニューを見えないようにしておきたいので ul に対して
display: none;
としておきます。
See the Pen
Untitled by taichi (@taichi_na)
on CodePen.
これで一時的にメニューが見えなくなりました。
この見えなくなったメニューを、jQueryを使ってボタンをクリックしたときに開くようにしたいわけです。
【.slideToggle】メニューの開閉を実現する
See the Pen
slideToggle2 by taichi (@taichi_na)
on CodePen.
全体の流れとしては、クリックしたときに<ul>が開閉するようにすればよいわけです。
ということで、以前学習した .click と function() が使えますね。
【jQuery-3】メソッドに対して引数ではなく関数を指定する
そしてその中に以下のスクリプトを書きます。
$(“ul”).slideToggle(200);
新しいメソッド .slideToggle は、セレクタで指定した要素をスライドしながら開閉させます。ここでは見えなくしておいた <ul> をスライドしながら開閉させています。
引数の（200）は開閉のスピードになります。数字を変えて試してみましょう。
