今回は、jQueryで要素Aをクリックした時にクリックした対象とは別要素の表示を実装。
使っているメソッドは・・・
・ 条件に一致する要素に対して繰り返し処理をする『.each()』
・ 指定要素の次にある要素を探してくる『.next()』
・ 要素の表示と非表示をする『.toggle()』
・ cssの追加や変更処理をする『.css()』
以上４つを使ってます。
定義リストを使って定義語をクリックした時に定義説明を表示するものに仕上げたので備忘録。
webサイトのQ&Aサイトで見かける質問をクリックした時に、答えを表示させるイメージで作りました。
※jQueryの勉強をしつつ見た目はいい感じにしたかったので、Bootstrap を使用しています。
今回の内容
STEP1.定義語をクリックした時に定義説明を表示する。
STEP1-1. 要素を画面に作成する
さっそく定義リストを作成します。
クリックした時にクリックした対象の定義説明が表示されたことがわかるために、定義語と定義説明を3つほど用意します。今回はQ&Aサイトがイメージなので、ページを表示した時は定義説明を非表示にしておきます。
それでは見た目の調整をいれたcssも含め、htmlファイルに記述します。
以下、htmlファイルの中身です。↓
・・・・・cssの部分です・・・・・
<style>
body{
font-family:'Lucida Grande','Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3',Meiryo, メイリオ, sans-serif;
}
dt{
background: #FFCDD2;
padding: 10px;
margin-top: 10px;
cursor: pointer;
}
dd{
border: solid 3px #FFCDD2;
padding: 10px;
display: none;
}
.dammy{
background: #F8BBD0;
margin-top: 10px;
width: 310px;
height: 260px;
padding: 135px 0 150px 110px;
}
</style>
・・・・・省略。htmlの部分です・・・・・
<div class="container">
<div class="col-md-8">
<dl>
<dt>Q.●●●に入会するためにはどうしたらいいですか？</dt>
<dd>A.画面上部の「新規登録」より登録フォームに必要事項を入力してください。<br>
登録の流れは「新規登録の流れ」をご参照ください。</dd>
<dt>Q.●●●を退会したいです。</dt>
<dd>A.マイページの「退会」よりフォームに必要事項を入力してください。<br>
退会の流れは「退会の流れ」をご参照ください。</dd>
<dt>Q.月額料金はいくらですか？</dt>
<dd>A.ベーシックプランの場合は、無料です。<br>
スペシャルプランの場合は、月額500円です。</dd>
</dl>
</div>
<div class="col-md-4 dammy">ダミーエリア</div>
</div>
ここまでだと、次の画像のように表示されている状態になっていると思います。↓
画面が作成できたら、続いてjQueryを記述するjsファイルを作っていきます。
jQueryは別ファイルに記述することが多いのでhtmlファイルからjsファイルを参照するようにします。今回はjsファイルの名前を「sample.js」として、以下をbodyの閉じタグ前に記述します。
・・・・・省略・・・・・ <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script> <script src="sample.js"></script> </body>
STEP1-2. 定義語をクリックした時に定義説明を表示する
jQueryで定義語をクリックした時に定義説明を表示する動作をさせていきます。
ここで『.each()』メソッド、『.next()』メソッド、『.toggle()』メソッド、『.css()』メソッドを組み合わせて使います。
※『.each()』メソッドについては、過去記事「jQueryでクリックした時にマス目の色を変更する〔.each( )〕」も参考にしてみてください。
※『.css()』メソッドについては、過去記事「ボタンをクリックした時にjQueryでcssを書き換えてみる」も参考にしてみてください。
動作の流れは、
1. 『.each()』メソッドで処理の繰り返しを指定し、
2. クリックした定義語の次にある定義説明を探してくる変数を作り、
3. 定義語をクリックした時に、対象の定義説明を表示する。
4. もう一回クリックした時は、対象の定義説明を非表示にする。
といった感じです。
上記に合った動作をさせるためにさっそく、以下の内容を「sample.js」に記述します。
//定義語をクリックした時に定義説明を表示する
$(function(){
$('dt').each(function(){
var dd = $(this).next();
$(this).toggle(function(){
dd.css('display','block');
},function(){
dd.css('display','none');
});
});
});
どうですか？
次の画像みたいに定義語をクリックした時に対象の定義説明が表示、もう一度クリックした時は非表示なっていたらOKです。
※クリックした時に表示と非表示にならない場合は、F12からDeveloper Toolsを開き、Consoleタブでエラーが出ていないか確認してみてください。
今回の動作確認用にデモサイトを準備しました。
よかったら画像をクリックしてデモサイトで動作確認してみてください。↓
デモサイト
