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

2021/12/08

jQuery

t f B! P L


過去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)は開閉のスピードになります。数字を変えて試してみましょう。

カテゴリー別に記事を探す

このブログを検索

お問い合わせ

名前

メール *

メッセージ *

QooQ