アコーディオンボタン

メニューボタンのひとつをタップしてアコーディオンで開き、他のボタンを開いたときにそれを閉じる。 タッチデバイスのみに適用したいときに。

#navTest ul{
	display:block;
	margin:auto;
	text-align:center;
}
#navTest li{
	cursor:pointer;
}
#navTest dl{
	width:100%;
	height:50px;
	overflow:hidden;
}
#navTest dt,
#navTest dd{
	position:relative;
	display:table;
	table-layout: fixed;
	width:100%;
	vertical-align:middle;
}
#navTest dt{
	z-index:0;
	height:50px;
}
#navTest dd{
	z-index:1;
}
#navTest dt *,
#navTest dd *{
	display:table-cell;
	vertical-align:middle;
	width:100%;
	padding:0 10px;
	font-size:1em;
	line-height:1em;
	background:#999;
	word-wrap: break-word;
}
#navTest dd *{
	padding:10px;
	background:#666;
}
#navTest dt *:hover,
#navTest dd *:hover{
	background:#ccc;
}
  

 
  

    

      

        

          
Meets
          
Beef
          
Pork
          
Chikin
        
      
      

        

          
Vegetables
          
Potato
          
Tomato
        
      
      

        

          
Fruits
          
Strawberry
          
Orange
          
Apple
          
Cherry
        
      
    
  
  

 
$(function(){
	// 'touchstart' は 'mousedown' にするとPCでも使える
	$('#navTest dl').bind('touchstart', function(){
		$('#navTest dl').css({overflow:'hidden',height:'50px'});
		$(this).css({overflow:'visible',height:'auto'});
	});
});