« [3DS] ピースあつめの旅 : スーパーマリオ 3Dランド (12パネル目) | トップページ | [mixiアプリ] マイ・レジェンド : 勇者の大陸「淵の神社」クリア »

2012年5月22日 (火)

[Web作成] メニューの展開と折りたたみ : すべて展開とすべて折りたたみ

2010年3月11日の「メニューの展開と折りたたみ」記事のコメント欄で、「すべて展開」と「すべて折りたたみ」を実現する方法の質問がありましたので、前回のソースコードに追加する形で作ってみました。
.oO( ・・・といっても、クリック時にクラス名を一括置換してるだけですが。 )
・すべて展開
・すべて折りたたむ
メニュー1
メニュー2
メニュー3

前回のソースに追記したソースコードは、次の通り。

■javascript
function doReplaceClassName(findClassName, replaceClassName, targetTagName){
  var elements = document.getElementsByTagName(targetTagName || '*');
  for (var i = 0; i < elements.length; i++) {
    if (elements[i].className == findClassName)
      elements[i].className = replaceClassName;
  }
}

■style
.vmenu_all_action {margin:2px 0px;}
.vmenu_all_action span {cursor:pointer; font-size:12px; color:#700; font-weight:bold; margin:2px 0px;}
.vmenu_all_action span:hover {color:#C00;}

■html
<div class="vmenu_all_action"><span onclick="doReplaceClassName('vmenu_off', 'vmenu_on')">・すべて展開</span></div>
<div class="vmenu_all_action"><span onclick="doReplaceClassName('vmenu_on',  'vmenu_off')">・すべて折りたたむ</span></div>

また実際に動作するhtmlファイルは次のURL先となります。
http://fjiblog.cocolog-nifty.com/html/fji_vertmenu.html (別ウィンドウ表示)

アコーディオンメニュー」へ続く。
■過去記事
2010年3月11日 (木) : メニューの展開と折りたたみ

|

« [3DS] ピースあつめの旅 : スーパーマリオ 3Dランド (12パネル目) | トップページ | [mixiアプリ] マイ・レジェンド : 勇者の大陸「淵の神社」クリア »

HTML・CSS・JS関連」カテゴリの記事

プログラミング」カテゴリの記事

コメント

とても魅力的な記事でした!!
また遊びに来ます!!
ありがとうございます。。

投稿: 履歴書の書き方 | 2012年6月 1日 (金) 10時09分

■履歴書の書き方さんへ
ありがとうございます!

投稿: fji | 2012年6月 1日 (金) 19時12分

こんばんは。

コメントを見てくださり、ありがとうございます!
無事、やりたいことが出来ました。どうもありがとうございました!

投稿: YTk | 2012年6月 8日 (金) 21時43分

■YTkさんへ
やりたいことが出来たとのことで、良かったです!happy01

投稿: fji | 2012年6月 9日 (土) 13時53分

はじめまして。簡潔なソースコードで思ったことが実現できたので、便利に使わせていただいております。ありがとうございます。質問ですが、展開した部分が他の部分を展開した際に自動で閉じるというようなことはできますでしょうか?メニュー項目が多くなると展開した部分を閉じないでクリックしていくと、ページの長さを超えてしまうので・・・。

投稿: サイケン | 2012年6月30日 (土) 16時05分

■サイケンさんへ
はじめまして。お返事遅くなりましたが、お褒めの言葉&活用にとても嬉しく思います。(^^)
質問の件ですが既存のソースコードを元に一部の修正のみでアコーディオンメニューを実現した記事を書いてみましたので参考にしていだけると幸いです。
http://fjiblog.cocolog-nifty.com/blog/2012/07/web-11ed.html

投稿: fji | 2012年7月 5日 (木) 00時43分

コメントを書く



(ウェブ上には掲載しません)




トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/503754/54775929

この記事へのトラックバック一覧です: [Web作成] メニューの展開と折りたたみ : すべて展開とすべて折りたたみ:

« [3DS] ピースあつめの旅 : スーパーマリオ 3Dランド (12パネル目) | トップページ | [mixiアプリ] マイ・レジェンド : 勇者の大陸「淵の神社」クリア »