jQueryを実際に書いていくための準備

 

htmlのheadとbody、jQueryのファイルにそれぞれ以下の内容を記入する。

 

【モーダルを作成する】

モーダルとはクリックした時に表示させるもの。

例えばログインボタンを押したら、ログインフォームを表示させるなど。

 

・モーダルを1箇所表示させる。

①CSSの該当要素にdisplay:noneをかける。これはクリックするまでは見せないようにするため。

②script.jsにクリックイベントを作成し、クリックしたらfadeInメソッドを使ってモーダルを表示させる。

 

・同じモーダルを2つのボタンから表示させる場合

※2箇所に同じclickイベントを設定する場合は、新規登録のボタンにはidではなくclassを使用する。

①htmlに同じクラス名をそれぞれのボタンにつける。

(クラスを二つつける場合は、一つ目のクラス名から半角開けて記入する)

②script.jsにクリックイベントでクラス名がクリックされた時に、ログインフォームが表示させるようにfadeInメソッドを使用して記述する。

 

【モーダルを一つ隠すor2つ隠す】

script.jsのみに記述する。クリックした時に該当クラスをfadeOutさせる。

 

【hoverイベントでaddClassとremoveClassを使う】

hoverイベントとはカーソルが乗った時に表示させるもの。

htmlとcssで通常時は表示させないようにdisplay:none、カーソルが乗った時に表示させるようにdisplay:blockを指定する。

 

・addClass 既存のクラスに追加することができる。

・removeClass 既存のクラスから削除することができる。

・toggleClass(""); addClassとremoveClassを両方を合わせた様に使えるメソッド。

 

【アコーディオンを作成する】

アコーディオンとはクリックした時に、テキストを表示させるアニメーション。

概要はif文を使って、もし該当クラスを持っていたら、テキストをオープンにし、テキストが開いている場合は閉じる。

オープンにした際に右上の表示を閉じるボタン(ー)、通常時は開くボタン(+)にするための記述を書く。

 

 

コードの記述例と実際の表示例