前回はdl要素を使いましたが、今回はli要素でマークアップをしていきましょう。
文章構造
<div id="News_area"> <div id="News_release"> <h2 id="News_click">ニュースリリース</h2> <ul id="News_text"> <li><span>2016年9月2日</span><a href="#">[スプリングバレーブルワリー東京(代官山)限定]「秋三昧」を新発売</a></li> <li><span>2016年9月1日</span><a href="#">「のどごし〈生〉」の新CMがスタート</a></li> <li><span>2016年9月1日</span><a href="#">「グランドキリン 十六夜お月見ボックス」を数量限定で発売</a></li> <li><span>2016年9月1日</span><a href="#">『セブンプレミアム アンデスキーパー カベルネ・ソーヴィニヨン 750ml/ソーヴィニヨン・ブラン 750ml』を発売</a></li> <li><span>2016年8月31日</span><a href="#">「ギュギュッと搾ったサングリア 赤ワイン×ピーチ&ストロベリー&ラズベリー」新発売</a></li> <li><span>2016年8月30日</span><a href="#">「キリン 氷結® ハロウィンオレンジ<期間限定>」発売中止について</a></li> <li><span>2016年8月30日</span><a href="#">「キリン 本搾り™ハイボール グレープフルーツ&ライム<期間限定>」を発売</a></li> </ul> </div> <div id="banner"> <h2>お知らせ</h2> <ul> <li><a href="#">「午後の紅茶」キャンペーン景品の自主回収に関するお詫びとお知らせ</a></li> <li><a href="#">弊社グループに関する不審な投資勧誘にご注意ください</a></li> <li><a href="#"><img></a></li> <li><a href="#"><img></a></li> <li><a href="#"><img></a></li> <li><a href="#"><img></a></li> </ul> </div> </div><!--/#News_area-->
アコーディオンパネルの導入
コーディングが終わったら、アコーディオンパネルを導入しましょう。
さらにスマホレイアウト(640px以下)のみの時に動くように条件分岐していきましょう。
.resize( )
ブラウザのウインドウをリサイズした時に引数のfunctionを実行します。また引数に何も設定しない場合は、要素に設定されたリサイズ時の処理を実行します。セレクタにはwindowsを指定しなければなりません(documentやhtmlでは機能しません)。
前回のモバイルファーストの際に使用した「.width」は1回1回リロードしないと現在のwidthを取得しませんが、今回の「.resize」はリロードする必要が無いので非常に便利ですが、使うには注意が必要です。
$(window).resize(function(){ $('#News_click').on('click touchstart',function(){ if($(window).width() <= 640){ $('#News_text').slideToggle(); } }); });
この記述だと、ul部分が縦にスクロールしても「.resize」が適応されるため、ulが開いた直後にもう1度「.slideToggle」が効いてしまうので、スクリプトの書き換えが必要になります。