トグル(アコーディオン)のサンプル
自前でアコーディオン作ったのでメモ
PCの時は開いたまんまで、690以下では大タイトルだけを残して中身はたたむイメージ。
thisを使って他の同じ要素が動かないようにする。
<div> <div class="acordion-switch"> <h4 style="cursor:pointer;">大タイトル</h4> <div class="acordion-area"> <ul> <li><a href="http://www.yahoo.co.jp/">リンク</a></li> </ul> <h5>中タイトル</h5> <ul> <li>このサイトについて</li> </ul> </div> </div> <div class="acordion-switch"> <h4>大タイトル</h4> <ul class="acordion-area"> <li>このサイトについて</li> </ul> </div> <div class="acordion-switch"> <h4>大タイトル</h4> <ul class="acordion-area"> <li>このサイトについて</li> </ul> </div> </div>
$(window).on('load',function(){ var windowwidth = $(window).width(); if(windowwidth < 690){ $('.acordion-area').css('display','none'); $('.acordion-switch').click(function(){ $(this).children('.acordion-area').toggle(); }); $('ul').click(function(event){ // バブリング防止 event.stopPropagation(); }); } });
liの中にリンクがあるとバブリングするので防止してる。