jQueryのアコーディオンメニュー 開閉の制御

Question

ページ遷移後アコーディオンが閉じてしまいますので、遷移先のカテゴリのメニューだけを開いている状態にしたいのですがどうしたらよいでしょうか？

新しいコードを書ける知識がないので、教えて頂けないでしょうか。
よろしくお願いします。

html

<ul> <li> <div class="category">category1</div> <ul class="fxmn"> <li><a href="11">menu 1-1</a></li> <li><a href="12">menu 1-2</a></li> <li><a href="13">menu 1-3</a></li> </ul> </li> <li> <div class="category">category2</div> <ul class="fxmn"> <li><a href="21">menu 2-1</a></li> <li><a href="22">menu 2-2</a></li> <li><a href="23">menu 2-3</a></li> <li><a href="24">menu 2-4</a></li> </ul> </li> <li> <div class="category">category3</div> <ul class="fxmn"> <li><a href="31">menu 3-1</a></li> <li><a href="32">menu 3-2</a></li> <li><a href="33">menu 3-3</a></li> <li><a href="34">menu 3-4</a></li> <li><a href="35">menu 3-5</a></li> </ul> </li> </ul>

---

css

.category {
line-height:35px;
cursor:pointer;
padding-left: 24px;
background-color:#ededed;
color:#333333;
border-top:solid 1px #ffffff;
}

ul.fxmn li a{
height: 35px;
display:block;
}

ul.fxmn li{
border-bottom:solid 1px #ededed;
line-height:35px;
padding-left: 31px;
}

---

javascript

$(function(){
$("ul.fxmn").hide();
$("div.category").click(function(){
$("ul.fxmn").slideUp();
if($("+ul",this).css("display")=="none"){
$("+ul",this).slideDown();
}
});
});

Answer 1

HTMLやCSSに手を加えずにjQueryのみ書き換えて書くとしたら、こんな感じでしょうか。

var filename = location.pathname.split("/").pop();

$(function(){
    $('ul.fxmn:not(:has(a[href="' + filename + '"]))').hide();
    $("div.category").click(function(){ openMenu(this) });
});

function openMenu(category) {
    $("ul.fxmn").slideUp();
    $(category).next().slideDown();
}

openMenuメソッドを分割したのは、これを使って画面遷移直後にオープンしようかなと思った結果なのですが、結局これは使わずに書けてしまいました。

Comments

[cocolo]

ありがとうございました。
思い通りの動きになり、感謝しております。
もっと勉強します！