JavaScriptで折りたたみメニューを導入

Ads/Widgets:
サイト情報:
QLOOKアクセス解析
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
いろんなところを出したり出さなかったりするような表示がしたくなってきて、折りたたみメニューの作り方を調べてみました。 理屈は、「onClickとかのイベントでスクリプトを動作させてブロックの『display』プロパティを上書きすることで、そのブロックの表示を切り替える」ということらしい。

メニュー外部を切り替える

ここが表示されたりされなかったり切り替わる
ソースはこんな感じ。
<script type="text/javascript">  
<!--  
  function CloseMenuTest(id) {
    closeObj = document.getElementById('close_' + (id));  
    openObj  = document.getElementById('open_' + (id));  

    closeObj.style.display = "block";  
    closeObj.style.border = "none";
    openObj.style.display = "none";
    openObj.style.border = "none";
  }

  function OpenMenuTest(id) {
    closeObj = document.getElementById('close_' + (id));  
    openObj  = document.getElementById('open_' + (id));  

    closeObj.style.display = "none";  
    openObj.style.display = "block";  
    openObj.style.border = "1px solid #000";
  }

  function FlipMenuTest(id) {
    if (document.getElementById('close_' + (id)).style.display == "none") {  
      CloseMenuTest(id);
    }  
    else {
      OpenMenuTest(id);
    }  
  }  
  
  function OpenItemTest(obj) {
    obj.style.display = "block";
    obj.style.border = "1px solid #000";
  }

  function CloseItemTest(obj) {
    obj.style.display = "none";
  }

  function FlipItemTest(id) {
    obj = document.getElementById(id);
    if (obj.style.display == "none") {
      OpenItemTest(obj);
    }
    else {
      CloseItemTest(obj);
    }
  }
  
  function InitItemTest(id) {
    obj = document.getElementById(id);
     CloseItemTest(obj);
  }

  window.onload = function(){ InitItemTest('target'); }
//-->  
</script>  


<div id="close_1">  
<p><a href="#" title="開く" onclick="FlipMenuTest(1);">開く</a></p>  
</div>  
  
<div id="open_1" style="display: none">  
<p><a href="#" title="閉じる" onclick="FlipMenuTest(1);">閉じる</a></p>  
クリックすれば見えるテキスト  
</div>  

<p>
  <a href="#" title="トグル" onclick="FlipItemTest('target');">
    メニュー外部を切り替える
  </a>
</p>  

<div id="target">
ここが表示されたりされなかったり切り替わる
</div>

分かってきたけど、めんどくさいっすねー
この記事へのコメント
URL:
Comment:
Pass:
秘密: 管理者にだけ表示を許可する
 
この記事のトラックバックURL
http://arakiba.blog62.fc2.com/tb.php/136-276ccb43
この記事にトラックバックする(FC2ブログユーザー)
この記事へのトラックバック

 Copyright © アラキバ All rights reserved. 

 / Template by 無料ブログ テンプレート カスタマイズ
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。