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文を使って、もし該当クラスを持っていたら、テキストをオープンにし、テキストが開いている場合は閉じる。
オープンにした際に右上の表示を閉じるボタン(ー)、通常時は開くボタン(+)にするための記述を書く。
コードの記述例と実際の表示例