jQueryで現在のページの所属しているサブメニューを開いた状態にする。

1
<ul id="side-nav">
2
  <li><a href="01.html">メニュー1</a></li>
3
  <li><a href="02.html">メニュー2</a></li>
4
  <li>
5
    <a href="03.html">メニュー3</a>
6
    <ul id="sub01">
7
      <li><a href="sub01/01.html">サブメニュー1</a></li>
8
      <li><a href="sub01/02.html">サブメニュー2</a></li>
9
      <li><a href="sub01/03.html">サブメニュー3</a></li>
10
    </ul>
11
  </li>
12
  <li>
13
    <a href="04.html">メニュー4</a>
14
    <ul id="sub02">
15
      <li><a href="sub02/01.html">サブメニュー1</a></li>
16
      <li><a href="sub02/02.html">サブメニュー2</a></li>
17
      <li><a href="sub02/03.html">サブメニュー3</a></li>
18
    </ul>
19
  </li>
20
</ul>

1
ul ul {
2
  display: none;
3
}
4
ul ul.active {
5
  display: block;
6
}

1
$(function() {
2
  //現在のURLを配列で取得
3
  var now = location.href.split('/');
4
  //親のディレクトリ取得
5
  var dir = now.slice(now.length-2,now.length-1);
6
  var reg = new RegExp('(id=¥"'+dir+'¥"|id='+dir+')');
7
  $('#side-nav').each(function(){
8
    var txt = $(this).html();
9
    $(this).html(
10
      txt.replace(reg,'$1 class=¥"active¥"')
11
    );
12
  });
13
});