[Jquery]マウスオーバーでアコーディオンメニュー

意外?とマウスオーバーでアコーディオン無いんすね~。

下記サイト様を参考に
http://aqua-create.com/jquery/acordeon-menu-jquery/
http://web.donnatokimo.com/jquery/517

今回は最初に開くメニューは要らないので

if(index > 0) $this.next().hide('normal');

の部分を無理やり変更

$this.next().hide('normal');
<ul id="demo" class="clearfix">
 <li><a href="1">menu1</a>
  <ul>
   <li><a href="#">menu 1-1</a></li>
   <li><a href="#">menu 1-2</a></li>
   <li><a href="#">menu 1-3</a></li>
  </ul>
 </li>
 <li><a href="2">menu2</a>
  <ul>
   <li><a href="#">menu 2-1</a></li>
   <li><a href="#">menu 2-2</a></li>
   <li><a href="#">menu 2-3</a></li>
  </ul>
 </li>
 <li><a href="3">menu3</a>
  <ul>
   <li><a href="#">menu 3-1</a></li>
   <li><a href="#">menu 3-2</a></li>
   <li><a href="#">menu 3-3</a></li>
   <li><a href="#">menu 3-4</a></li>
  </ul>
 </li>
</ul>
<script type="text/javascript">
var j$ = jQuery;

j$(function(){
	j$("#demo").each(function(){
		j$("li > a", this).each(function(){
			var $this = j$(this);
			$this.next().hide('normal');
			$this.mouseover(function(){
				j$(this).next().show('normal').parent().siblings().children("ul:visible").hide('normal');
				return false;
			});
			$this.mouseout(function(){
				$this.next().hide('normal');
			});
		});
	});
});
</script>
#demo > li {
	float:left;
	width:150px;
	height:50px;
	}

余談ですが、#demo > li の書き方が超超便利なことに最近気づきました (遅)