【jQuery-4】.slideToggle メソッドを使ってメニューを開閉【超初心者向き】-キタテン

過去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を使ってボタンをクリックしたときに開くようにしたいわけです。

See the Pen slideToggle2 by taichi (@taichi_na) on CodePen.

全体の流れとしては、クリックしたときに<ul>が開閉するようにすればよいわけです。

ということで、以前学習した .click と function() が使えますね。

そしてその中に以下のスクリプトを書きます。

$("ul").slideToggle(200);

新しいメソッド .slideToggle は、セレクタで指定した要素をスライドしながら開閉させます。ここでは見えなくしておいた <ul> をスライドしながら開閉させています。

引数の（200）は開閉のスピードになります。数字を変えて試してみましょう。