マウスオーバーで開閉できるアコーディオンメニューの方法を教えて下さい。

質問

初めまして。
JSはプログラムを組んだことがなく、悩んでおります。
一応、アコーディオンメニューは設置しておりますが、クリックで開閉するアコーディオンメニューなので、困っております。

htmlのソースです。
<ul class="acc">
<li><a href="1">category1</a>
<ul class="fxmn">
<li><a href="11">menu 1-1</a></li>
<li><a href="12">menu 1-2</a></li>
<li><a href="13">menu 1-3</a></li>
</ul>
～以下省略します～

そしてjavascriptのソースです。
var j$ = jQuery;

j$(function(){
j$(".acc").each(function(){
j$("li > a", this).each(function(index){
var $this = j$(this);

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

$this.click(function(){
j$(this).next().toggle().parent().siblings()
.children("ul:visible").hide();
return false;
});
});
});
});

すみませんが、よろしくお願いいたします。

回答No.3

imq · ベストアンサー

jQueryを使っているならclickをmouseoverに変えるだけでいいんじゃないでしょうか。

var j$ = jQuery;

j$(function(){
j$(".acc").each(function(){
j$("li > a", this).each(function(index){
var $this = j$(this);

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

$this.mouseover(function(){
j$(this).next().show('normal').parent().siblings()
.children("ul:visible").hide('normal');
return false;
});
});
});
});

動作が分りやすいようにスピードを入れてみました。
アコーディオンというと、toggleよりもshowの方がいいような気がして勝手に変えましたが、好みでなければ戻してください。

お礼

無事に、マウスオーバーでアコーディオンメニューになりました。

いろいろとご親切にありがとうございました。

回答No.2

fujillin

なんだかこれとほとんど同じですね…
＞http://triplexxx.jp/archives/150
基本的にはonclickで処理する替わりに、onmouseover、onmouseoutなどの場合に開閉するようにしてあげればよいはずですけど。

ご自分で作成するのなら、かなり近いのがこんな感じ？
http://hyper-text.org/archives/2006/12/slidemenu_sample.shtml

つくるのが面倒なら、ライブラリを利用する手もあります。
（設定でクリック、マウスオーバーなどを選択できるもの）
http://docs.jquery.com/UI/Accordion#event-change
http://www.i-marco.nl/weblog/yui-accordion/#basic
http://www.dynamicdrive.com/dynamicindex17/ddaccordion.htm

あとちゃんと中身を確認してないけど
http://jqueryfordesigners.com/slide-out-and-drawer-effect/
http://www.leigeber.com/2008/10/animated-javascript-accordion/
http://tutorialblog.org/10-javascript-accordion-scripts/

おまけ　（CSSで実現するもの = #1様の回答の方法）
http://digibot.jp/blog/2008/04/css.html
http://css-eblog.com/csstechnique/accordionmenu.html
（IE対応にはスクリプトが必要ですが…）

お礼

ありがとうございます。
いろいろと勉強になります。早速、参考にさせていただきたいと思います。

回答No.1

yambejp

こんなんでどうでしょう？

<style>
ul.acc ul{
display:none;
}
ul.acc li{
behavior:expression(
this.onmouseover=function(){this.className="hover"}
,this.onmouseout=function(){this.className=""}
)
}
ul.acc li:hover ul,ul.acc li.hover ul{
display:block;
}
</style>
<ul class="acc">
<li><a href="1">category1</a>
<ul>
<li><a href="11">menu 1-1</a></li>
<li><a href="12">menu 1-2</a></li>
<li><a href="13">menu 1-3</a></li>
</ul></li>
<li><a href="1">category2</a>
<ul>
<li><a href="11">menu 2-1</a></li>
<li><a href="12">menu 2-2</a></li>
<li><a href="13">menu 2-3</a></li>
</ul></li>
</ul>

お礼

ソースのご提供ありがとうございます。
CSSを設置してみましたが、状況は変わりませんでした。

私のほうでもいろいろと探してみます。
ありがとうございます。