ようこそ ゲスト さん、新規登録（無料）して気になる疑問を解決しませんか？
はじめての方へ｜FAQ

質問
質問者：hara-guu マウスオーバーで開閉できるアコーディオンメニューの方法を教えて下さい。
困り度：
  • 困っています
 初めまして。
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;
});
});
});
});

すみませんが、よろしくお願いいたします。
質問投稿日時：09/10/30 12:14
質問番号：5408344
この質問に対する回答は締め切られました。
最新から表示｜回答順に表示｜良回答のみ表示

回答

良回答20pt
回答者：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の方がいいような気がして勝手に変えましたが、好みでなければ戻してください。
種類：アドバイス
どんな人：一般人
自信：参考意見
回答日時：09/10/30 18:05
回答番号：No.3
この回答へのお礼無事に、マウスオーバーでアコーディオンメニューになりました。

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

回答

 
回答者：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対応にはスクリプトが必要ですが…）
種類：アドバイス
どんな人：一般人
自信：参考意見
回答日時：09/10/30 13:30
回答番号：No.2
この回答へのお礼ありがとうございます。
いろいろと勉強になります。早速、参考にさせていただきたいと思います。

回答

 
回答者：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>
種類：アドバイス
どんな人：一般人
自信：参考意見
回答日時：09/10/30 13:13
回答番号：No.1
この回答へのお礼ソースのご提供ありがとうございます。
CSSを設置してみましたが、状況は変わりませんでした。

私のほうでもいろいろと探してみます。
ありがとうございます。
最新から表示｜回答順に表示｜良回答のみ表示
このページのトップへ