アコーディオンメニューは下のサンプルのような動きをするメニューです。

サンプルのコードは以下のようになっています。

$("#aco_menu dd:not(:first)").hide();
$("#aco_menu dt").click(function () {
  $(this).next().toggle("normal");
});

HTMLの部分は以下のようになっています。

<div id="aco_menu">
<dl>
  <dt>項目1</dt>
  <dd>
    <ul>
      <li><a href="#">jQuery初心者向けサンプル</a></li>
      <li><a href="#">jQueryを使用したアコーディオンメニュー</a></li>
      <li><a href="#">jQueryでページスクロール</a></li>
    </ul>
  </dd>
  <dt>項目2</dt>
  <dd>
    <ul>
      <li><a href="#">アコーディオンメニュー　テスト項目2</a></li>
      <li><a href="#">コピー・ペーストで簡単に</a></li>
    </ul>
  </dd>
  <dt>項目3</dt>
  <dd>
    <ul>
      <li><a href="#">アコーディオンメニュー　テスト項目3</a></li>
      <li><a href="#">TEST1</a></li>
      <li><a href="#">TEST2</a></li>
      <li><a href="#">TEST3</a></li>
      <li><a href="#">TEST4</a></li>
    </ul>
  </dd>
</dl>
</div>

CSSは以下のようになっています。

#aco_menu dl {
  border: solid 1px #333333;
  width: 300px;
}

#aco_menu dt {
  border: solid 1px #333333;
  background-color: #fbfaf5;
  padding: 5px;
  cursor: pointer;
  font-weight: bold;
}

#aco_menu li {
  list-style-type: disc;
}

もし正常に動作しないようでしたら、jQueryの設置位置、呼び出し、「;」等コードの記述ミスが無いか確認してみてください。

※このページで紹介しているサンプルは「jQuery 1.2.6」を使用しています。バージョンの違い等により正常に動作しない場合がありますのでご注意ください。

ページの先頭へ