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

Web作成でJavaScriptを利用したメニューの展開と折りたたみを作ってみました。 ただネット検索するとたくさんの方法がありますが、どれもがIDを指定したやり方であったり、汎用性の無いJavaScriptコードによるやり方だったりするので、自分なりにCSSで展開と折りたたみを指定できる汎用性の高いものを意識してみました。

---

メニュー1

• 項目1-1
• 項目1-2
• 項目1-3

メニュー2

• 項目2-1
• 項目2-2
• 項目2-3

メニュー3

• 項目3-1
• 項目3-2
• 項目3-3

---

ソースコードは、次の通り。

<script type="text/javascript"><!--
function doToggleClassName(obj, onClassName, offClassName){obj.className = (obj.className != onClassName) ? onClassName : offClassName;}
function getParentObj(obj){return obj.parentElement || obj.parentNode;}
//--></script>

<style type="text/css">
.vmenuitem{background-color:#ffffcc; cursor:pointer; width:100px;}
.vmenu_on, .vmenu_off{margin:2px 0px;}
.vmenu_on .vmenuitem{border:1px solid #cccc77; border-left:5px solid #cccc77;}
.vmenu_off .vmenuitem{border:1px solid #77cccc; border-left:5px solid #77cccc;}
.vmenu_on ul{display:auto; margin:2px auto;}
.vmenu_off ul{display:none;}
</style>

<div class="vmenu_on">
  <div class="vmenuitem" onclick="doToggleClassName(getParentObj(this),'vmenu_on','vmenu_off')">メニュー1</div>
  <ul>
    <li><a href="#">項目1-1</a></li>
    <li><a href="#">項目1-2</a></li>
    <li><a href="#">項目1-3</a></li>
  </ul>
</div>
<div class="vmenu_off">
  <div class="vmenuitem" onclick="doToggleClassName(getParentObj(this),'vmenu_on','vmenu_off')">メニュー2</div>
  <ul>
    <li><a href="#">項目2-1</a></li>
    <li><a href="#">項目2-2</a></li>
    <li><a href="#">項目2-3</a></li>
  </ul>
</div>
<div class="vmenu_off">
  <div class="vmenuitem" onclick="doToggleClassName(getParentObj(this),'vmenu_on','vmenu_off')">メニュー3</div>
  <ul>
    <li><a href="#">項目3-1</a></li>
    <li><a href="#">項目3-2</a></li>
    <li><a href="#">項目3-3</a></li>
  </ul>
</div>

---

「すべて展開とすべて折りたたみ」へ続く。