アコーディオンメニュー

アコーディオンメニューの本質は、隠しコンテンツです
何をどこまで消えていることが、必然性があるかを検討します

すべてが開いている状態を作成

jQueryの設計から、逆算してマークアップをする必要があります
ulを設計する（メニューのみの場合）
dlを設計する（コンテンツ内容を見せる場合）※テキスト参照

ulを設計する

クリックイベントは、div要素などに対して設定する（ulは、実態が無い li を囲む概念のため）

<div id="container">
<ul class="nav"> 
<li>
<div class="category">ファッション</div>
<ul class="menu"> 
  <li><a href="#">アウター</a></li> 
  <li><a href="#">インナー</a></li> 
  <li><a href="#">ボトム</a></li> 
  <li><a href="#">バッグ</a></li>
  <li><a href="#">靴</a></li>
  <li><a href="#">アクセサリー</a></li>
</ul> 
</li> 
<li>
<div class="category">家具・インテリア</div>
<ul class="menu"> 
  <li><a href="#">収納家具</a></li> 
  <li><a href="#">ソファ</a></li> 
  <li><a href="#">ベッド</a></li> 
  <li><a href="#">テーブル</a></li> 
  <li><a href="#">チェア</a></li> 
  <li><a href="#">照明</a></li> 
</ul> 
</li>
<li>
<div class="category">ステーショナリー</div>
<ul class="menu"> 
  <li><a href="#">ペン・鉛筆</a></li> 
  <li><a href="#">ノート</a></li> 
  <li><a href="#">ファイル</a></li> 
  <li><a href="#">付箋</a></li> 
</ul> 
</li> 
<li>
<div class="category">生活雑貨</div>
<ul class="menu"> 
  <li><a href="#">キッチン用品</a></li> 
  <li><a href="#">掃除・洗濯用品</a></li> 
  <li><a href="#">バス・トイレ用品</a></li> 
  <li><a href="#">その他</a></li> 
</ul> 
</li> 
</ul>
</div><!-- /#container -->

@charset "UTF-8";

/* reset
------------------------------------*/
html, body, ul, li {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
}
ul {
  list-style: none;
}
a {
  text-decoration: none;
}

/* font-size */
body { font-size: 16px; }
ul { font-size: 16px; }

/* body
------------------------------------*/
body{
  background:#FFF;
  line-height: 1.5;
  color: #164158;
}

/* layout
------------------------------------*/
#container {
  width:220px;
  margin: 50px auto;
}

/* menu
------------------------------------*/
.category {
  margin-top: 5px;
  height: 40px;
  line-height: 40px;
  text-indent: 3em;
  background: #CCC;
  cursor: pointer;
}
ul.menu a{
  display:block;
  height: 35px;
  line-height: 35px;
  color: #164158;
}
ul.menu li{
  text-indent: 3.0em;
}
ul.menu li:hover{
  background: #EEE;
}

別例

ulのネスト構造
クリックイベントを、spanに設定します

<ul>
<li>
    <p><span>ファッション</span></p>
    <ul>
    <li><a href="#">アウター</a></li>
    <li><a href="#">インナー</a></li>
    <li><a href="#">ボトム</a></li>
    </ul>
</li>
<li>
    <p><span>家具・インテリア</span></p>
    <ul>
    <li><a href="#">収納家具</a></li>
    <li><a href="#">ソファー</a></li>
    <li><a href="#">ベッド</a></li>
    </ul>
</li>
</ul>

すべて閉じる

hide()メソッドを設定する
「.category」以外をすべて隠します（ ul を display: none にする）

<script>
$(function(){	　
  $( 'ul.menu' ).hide();
});
</script>

クリックイベントにより開く

slideDown()メソッドを設定する
条件分岐で判別する
クリックされた要素の次に続く「ul」が「 display: none」だった場合に、slideDown()メソッドで下に開くアニメーションを実行する
コールバック関数に「this」を指定しないと、どの位置の「.category」されたかが判別できない

<script>
$(function(){
  $( 'ul.menu' ).hide();
  $( '.category' ).on( 'click', function(){
    if( $( '+ul',this).css( 'display' ) == 'none' ) {
      $( '+ul',this).slideDown();
    }
  });
});
</script>

開いていることを明示する

CSSで修飾します
そのためにクラス名を追加します
addClass()メソッドを設定する

.open {
  background: #333;
  color: #FFF;
}

<script>
$(function(){
  $( 'ul.menu' ).hide();
  $( '.category' ).on( 'click', function(){
    if( $( '+ul',this).css( 'display' ) == 'none' ) {
      $( '+ul',this).slideDown();
      $(this).addClass( 'open' );
    }
  });
});
</script>

閉じる設定

条件が「true」以外は閉じる
開いていたら、slideUp()メソッドで上に閉じるアニメーションを実行する
クラス名も削除する

<script>
$(function(){
  $( 'ul.menu' ).hide();
  $( '.category' ).on( 'click', function(){
   $( 'ul.menu' ).slideUp();
    $( '.category' ).removeClass( 'open' );
    if( $( '+ul',this).css( 'display' ) == 'none' ) {
      $( '+ul',this).slideDown();
      $(this).addClass( 'open' );
    }
  });
});
</script>

ひとつめのカテゴリのみ開いておく場合

<script>
$(function(){
  $( 'ul.menu:not(:first)' ).hide();
  $('.category:first').addClass( 'open' );
  $( '.category' ).on( 'click', function(){
   $( 'ul.menu' ).slideUp();
    $( '.category' ).removeClass( 'open' );
    if( $( '+ul',this).css( 'display' ) == 'none' ) {
      $( '+ul',this).slideDown();
      $(this).addClass( 'open' );
    }
  });
});
</script>

ポイント

toggle()メソッドを設定したように実行されます
実際には、開いているか閉じているかの判別を、クリックイベントがある隣接セレクタに対して行っています

画像のhoverなどを追加する場合には、以下の記述を追加します。

  $( 'ul.menu li' ).on('mouseover', function(){
    $(this).addClass( 'rollover' );
  }).on('mouseout', function(){
    $(this).removeClass(' rollover' );
  });