読者です 読者をやめる 読者になる 読者になる

トグル(アコーディオン)のサンプル

自前でアコーディオン作ったのでメモ
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の中にリンクがあるとバブリングするので防止してる。