WordPressでJavaScriptを使って折りたたみリンクメニューを作成

メニュー内の項目が増えてきましたので、下記サイトを参考にしてJavaScriptで折りたたみリンクメニューを作成しました。
折りたたみメニュー

WordPressでのJavaScript使用方法は、下記記事でも確認しました。
WordPressの投稿内でJavaScriptを使う方法
　

１）JavaScriptを外部ファイルに作成

　
$ cd /var/www/html/wptest/wp-content/themes/twentytwelve/js
$ vi oritatami.js
　

function oritatami(id){
  obj=(document.all)?document.all(id):((document.getElementById)?document.getElementById(id):null);
  if(obj) obj.style.display=(obj.style.display=="none")?"block":"none";
}

　

２）メニューを記述する投稿または固定ページにJavaScriptで折りたたみメニュー作成

　
・ここでは、投稿内で１）で作成したJavaScriptをインクルードしています。
　
・メニューは２階層のメニューを作成しています。
　
・下記サンプルコードでは、ブラウザの設定でJavaScriptがオフになっている場合は、”URL①”、”URL②”のページに遷移します。
　
“URL①”、”URL②”にJavaScriptを使わずに作成したメニューを用意しておき、JavaScriptがオフでもメニューが使用できるようにします。
　

<script src="http://example.com/wptest/wp-content/themes/twentytwelve/js/oritatami.js" type="text/javascript"></script>

<a href="URL①" onclick="oritatami('o0');return false">メニュー1</a>
<div id="o0" style="display:none">
  <ul>
    <li><a href="URL">項目1</a>
    <li><a href="URL">項目2</a>
    <li><a href="URL">項目3</a>
  </ul>
</div>
<a href="URL②" onclick="oritatami('o1');return false">メニュー2</a>
<div id="o1" style="display:none">
  <ul>
    <li><a href="URL">項目1</a>
    <li><a href="URL">項目2</a>
    <li><a href="URL">項目3</a>
    <li><a href="URL" onclick="oritatami('o2');return false">サブメニュー</a>
       <div id="o2" style="display:none">
         <ul>
           <li><a href="URL">項目1</a>
           <li><a href="URL">項目2</a>
           <li><a href="URL">項目3</a>
         </ul>
    </li>
  </ul>
</div>

　

３）JavaScriptオフ用のメニューページを作成

　
JavaScriptがオフの場合に、２）の”URL①”、”URL②”で遷移してくるメニューを作成