[Web作成] アコーディオンメニュー
2012年5月22日の「メニューの展開と折りたたみ : すべて展開とすべて折りたたみ」記事のコメント欄で、「展開した部分が他の部分を展開した際に自動で閉じるというようなことはできますでしょうか?」というリクエストに応えてみました。
実際の動作は次の通り。
※2010年3月11日の「メニューの展開と折りたたみ」のjavascript部に一部機能追加することで、アコーディオンメニューを実現。
実際の動作は次の通り。
※2010年3月11日の「メニューの展開と折りたたみ」のjavascript部に一部機能追加することで、アコーディオンメニューを実現。
修正箇所は、次の通り。
■修正前のソース(javascript部のみ)
■修正後のソース(javascript部のみ)
また実際に動作するhtmlファイルは次のURL先となります。
http://fjiblog.cocolog-nifty.com/html/fji_vertmenu_accordion.html (別ウィンドウ表示)
■過去記事
・2012年5月22日 (火) : すべて展開とすべて折りたたみ
・2010年3月11日 (木) : メニューの展開と折りたたみ
■修正前のソース(javascript部のみ)
function doToggleClassName(obj, onClassName, offClassName){ obj.className = (obj.className != onClassName) ? onClassName : offClassName; } |
■修正後のソース(javascript部のみ)
function doToggleClassName(obj, onClassName, offClassName){ obj.className = (obj.className != onClassName) ? onClassName : offClassName; var elements = document.getElementsByTagName(obj.tagName); for (var i = 0; i < elements.length; i++) { if ((elements[i] != obj) && (elements[i].className == onClassName)) elements[i].className = offClassName; } } |
また実際に動作するhtmlファイルは次のURL先となります。
http://fjiblog.cocolog-nifty.com/html/fji_vertmenu_accordion.html (別ウィンドウ表示)
■過去記事
・2012年5月22日 (火) : すべて展開とすべて折りたたみ
・2010年3月11日 (木) : メニューの展開と折りたたみ
| 固定リンク
「プログラミング」カテゴリの記事
- [HTA]1ファイルでモーダルダイアログを表示(2016.08.22)
- [HTA]表示内容に合わせてウィンドウ縦方向自動伸縮(2016.08.11)
- [Web作成] アコーディオンメニュー(2012.07.04)
- [Web作成] メニューの展開と折りたたみ : すべて展開とすべて折りたたみ(2012.05.22)
- [Web作成] サイトやファイルの移転によるリダイレクト(2010.04.07)
「HTML・CSS・JS関連」カテゴリの記事
- [Canvas]Windowサイズに合わせてCanvasをリサイズ(2016.08.01)
- [Web作成] 通知メッセージ(2016.05.04)
- [JS] ストップウォッチ(2013.08.26)
- [Web作成] アコーディオンメニュー(2012.07.04)
- [Web作成] メニューの展開と折りたたみ : すべて展開とすべて折りたたみ(2012.05.22)
この記事へのコメントは終了しました。
コメント
リクエストにお応えいただいたのですね!そうです。これが実現したかったことです。お忙しい中、わざわざありがとうございました。早速、サイトのメニュー部分に使用させていただきます。本当にありがとうございました。
投稿: サイケン | 2012年7月 6日 (金) 23時49分
■サイケンさんへ
お返事遅くなりましたが、無事やりたいことが実現できたようでよかったです!ヽ( ̄▽ ̄)ノ
サイトを拝見させていただきましたが、各作品の詳しい説明と作成過程がわかりやすく、子供たちにとってとても参考になる良い図画工作作品アイディア集サイトですね!!(^^) 授業の資料なども丁寧でわかりやすくとても参考になります。
今後のさらなる充実と発展を楽しみにしています。
投稿: fji | 2012年7月11日 (水) 07時50分
サイトを見ていただいたのですね。ありがとうございます。感想をいただきとてもうれしいです。当初、メニューを長々と表示していたのですが、ここを拝見してアコーディオンメニューですっきりとさせることができました。そうしたら今度は欲が出て、厚かましくリクエストさせていただいた次第です。快くお応えいただき本当に感謝しております。fjiさんのブログのご発展をお祈りいたします。これからもよろしくお願いいたします。
投稿: サイケン | 2012年7月18日 (水) 23時14分
何度もすみません。言葉間違えてました。アコーディオンメニューは、今回教えていただいたメニューですね。
投稿: サイケン | 2012年7月19日 (木) 21時59分
■サイケンさんへ
何かと多忙によりお返事遅くなってしまってますが・・・
こちらこそ、その後のご報告を頂きとても嬉しく思います。(^^)
また何かありましたら力になれるかどうかわかりませんが、気軽にリクエストしていただければ幸いです。
こちらこそ、これからもよろしくお願いいたします。
投稿: fji | 2012年7月29日 (日) 00時01分