- ベストアンサー
アコーディオン自動開閉メニューjavascript
タイトルの通りjavascriptでアコーディオンを作りたいのでご質問です。 マウスオーバー時にメニューを設定した秒数の間スムーズに自動開閉する記述が知りたいので ご教唆お願いします。
- chapital2005
- お礼率66% (16/24)
- JavaScript
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
関連するQ&A
- jQueryのアコーディオンメニュー デフォルトでの開閉
jQueryのアコーディオンメニュー デフォルトでの開閉 すでに掲載されている http://okwave.jp/qa/q5978950.html 「jQueryのアコーディオンメニュー 開閉の制御」では 解決できませんでしたので質問です。 アコーディオンメニューにおいて 添付ファイルのように a.htmlを開いたら、1番上のアコーディオンが開いてる状態 b.htmlを開いたら、2番上のアコーディオンが開いてる状態 c.htmlを開いたら、3番上のアコーディオンが開いてる状態 にしたいのですが、 どうもうまくいきません。。。 メニューが２つならできるのですが ３つになるとさっぱりわからなくなります。 特にアコーディオンを使うための.jsにこだわりはないのですが （開閉時にスムーズに動く事ができればどれでも構わないです） これが可能になるjsはどこかにないでしょうか？ もしくは、どうすればこれが可能になりますでしょうか？ どうぞよろしくお願いいたします。
- ベストアンサー
- JavaScript
- マウスオーバーでゆっくり出る縦型アコーディオンメニューの作り方を教えてください。
マウスオーバーで、ゆっくり開くアコーディオンメニューを作成したいと考え色々、調べたのですがなかなかしっくりくるものがなくて困っています。 そこで、以下のサイトのドロップダウンメニューを改良してアコーディオンとして使えたらいいなと考え、自分なりにかまってみたのですが、上手くいきません。 参考サイト：http://www.leigeber.com/2008/04/sliding-javascript-dropdown-menu/ どなたか助言をよろしくお願いいたします。
- 締切済み
- JavaScript
- アコーディオンメニューについて教えてください
http://hyper-text.org/archives/2006/12/slide_menu_javascript.shtml 上記のURLを参考に縦型アコーディオンメニューを作ったのですが、動きがおかしいのを見つけてしまって困っています。 一瞬だけマウスをメニュー項目にもっていって、「あっ違った。もう一個したのメニューの中身が見たかったんだ」と思い、すぐさま下のメニューにマウスをかざすと、最初に選んだメニューが開きっぱなしになっていることがあります。 これは、直らないものなのでしょうか？ つまり、 menu #01を選んでからすぐにmenu #02にマウスをもってくる。 menu #01のメニューが開いたままになっている。 すごく困っています。 お願いいたします。
- ベストアンサー
- JavaScript
- 開閉するメニューコンテンツの自動スクロールのスクリプト
よろしくお願い致します。 javascript入門者です。 javascriptで開閉するメニューコンテンツを作りたく http://www.phatfusion.net/imagemenu/ これを使用しています。 ただもう少し動的なコンテンツにしたいので自動でCMっぽく スクロールさせたいのですがどういったスクリプトを記述すればよいのでしょうか？ どなたかご教授をお願い致します。
- ベストアンサー
- JavaScript
- JavaScriptでアコーディオンメニューを作る
こちらでよくお世話になっています。 JavaScriptに詳しい方、どうか教えてください。 当方、まだまだJavaScriptは初心者です。 以下のようなHTMLがあって、 コンテンツ部分を普段は非表示で タイトル部分をクリックしたら、 その下の表示・非表示が切り替わるようにしたいと考えています。 （アコーディオンの感じです。） ------------------------- <div id="title1">タイトル1</div> <table id="contents1"> <tr><td>コンテンツ1</td></tr> </table> <div id="title2">タイトル2</div> <table id="contents2"> <tr><td>コンテンツ2</td></tr> </table> <div id="title3">タイトル3</div> <table id="contents3"> <tr><td>コンテンツ3</td></tr> </table> ちなみに、それぞれタイトルとコンテンツがセットになっていて、 titleのid名の末尾の番号と そこをクリックしたら、開閉するtableのid名の末尾の番号を一致させています。 ※このタイトルとコンテンツは動的に増えたり減ったりします。 プラグインを入れないで 自分でjavascriptを組みたいと考えているのですが どのようにすればよいのか、分からず こちらで質問をさせていただきました。 var divList = document.getElementsByTagName('div'); for(i=0; i<divList.length; i++){ } のようにやっていくのだろうとは思うのですが for文の中をどのように書いたらよいかを ご教授いただけたら助かります。 どうぞ宜しくお願いいたします。
- ベストアンサー
- JavaScript
- jqueryアコーディオンのマウスオーバー
http://triplexxx.jp/archives/150で制作しましたが、 現在クリックでアコーディオンします。 jqueryアコーディオンのマウスオーバー、マウスアウトでの開閉にしたいのですが、 全く知識がありません。 何処を修正したらいいか教えてください。
- ベストアンサー
- JavaScript
- IE8のJavascriptアコーディオンについて
自サイトで以下のサイトにあるJavascriptアコーディオンを使用しようとしたのですが、IE8でだけ挙動がおかしくなります。 http://www.scriptiny.com/2008/10/animated-javascript-accordion/ 私の記述ミスかと思ったのですが、サイトにあるデモをIE8で表示した時も同じでした。 http://sandbox.scriptiny.com/accordion/index.html 見ていただければわかると思いますが、2つあるデモのうちの上の方のアコーディオンです。開いたり閉じたりすると、隙間のmargin-top:5pxが消えてピタッとくっつくように隙間がなくなってしまいます。互換モードのIE7やFF4、Safari5ではこのような挙動はしません。 たぶん構造的欠陥？ということだと思うのですが、Javascriptの知識がないため、どこをどう修正したら直るのか分かりません。提供元の方にもメールで直接尋ねたのですが、返事をもらえません（新しいバージョンのアコーディオンがあるので、これのサポートをする気がないのかもしれません）。 詳しい方がおられましたら直し方を教えてください。よろしくお願いいたします。
- ベストアンサー
- JavaScript
- マウスオーバーで開閉できるアコーディオンメニューの方法を教えて下さい。
初めまして。 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; }); }); }); }); すみませんが、よろしくお願いいたします。
- ベストアンサー
- JavaScript
- jQueryを利用したアコーディオンメニュー
wordpress上でjQueryを使用したアコーディオンメニューを作成しようと思います。 サイトの左カラムに設置して、ボックス化されたリストの一部をクリックするとメニューの開閉、 テキストリンクの部分をクリックするとカテゴリのリンクに飛ぶように作成したいと考えております。 アコーディオンの開閉までは作成できたのですが、そこからカテゴリへのリンクがうまく行きません。。 javascriptがあまり詳しくないので、ぜひともお力を貸してください。 よろしくお願いします。 <!--javascript--> <script type="text/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(){ var params = {height:"toggle", opacity:"toggle"}; j$(this).next().animate(params).parent().siblings() .children("ul:visible").animate(params); return false; }); }); }); }); </script> <!--/javascript--> <!--php--> <ul class="acc"> <?php wp_list_categories('hide_empty=0&title_li='); ?> </ul> <!--/php-->
- ベストアンサー
- JavaScript
- jQueryのアコーディオンメニュー 開閉の制御
jQueryのアコーディオンメニュー 開閉の制御 こちらの「jQueryでアコーディオンメニューを作成する」の記事を参考にして （http://triplexxx.jp/archives/150） アコーディオンメニューを設置しました。 ページ遷移後でも、常に一番目のメニューが開いている状態なので、 選択しているページのメニューだけを開いている状態にしたいのですが どの部分を変更したらよいでしょうか？ javascriptの if(index > 0) $this.next().hide(); の部分が開閉の指示をしている箇所かなと思うのですが 新しいコードを書ける知識がないので、教えてください。 よろしくお願いします。 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> </li> <li><a href="2">category2</a> <ul class="fxmn"> <li><a href="21">menu 2-1</a></li> <li><a href="22">menu 2-2</a></li> <li><a href="23">menu 2-3</a></li> <li><a href="24">menu 2-4</a></li> </ul> </li> <li><a href="3">category3</a> <ul class="fxmn"> <li><a href="31">menu 3-1</a></li> <li><a href="32">menu 3-2</a></li> <li><a href="33">menu 3-3</a></li> <li><a href="34">menu 3-4</a></li> <li><a href="35">menu 3-5</a></li> </ul> </li> </ul> ---------------------- css ---------------------- ul.acc, ul.acc li ul { margin: 0; padding: 0; list-style: none; } ul.acc a{ display: block; height: 30px; line-height: 30px; color: #feffff; } ul.acc { background-color: #185AAC; } ul.acc li ul { background-color: #A6B5E2; } ---------------------- 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(){ var params = {height:"toggle", opacity:"toggle"}; j$(this).next().animate(params).parent().siblings() .children("ul:visible").animate(params); }); }); }); }); ----------------------
- ベストアンサー
- AJAX
お礼
回答ありがとうございます。 質問の意図をくみ取っていただき、sampleまで！ ありがとうございます。 またまたの質問で恐縮ですが、親・子要素のhover時にアコーディオンを閉じない（hoverを外れるとintervalやsetTimeoutが作動）ように調整するにはどのようにすればよいのでしょうか？