ASP.NETページのポストバック後にliがクリックされたときに、アクティブなアコーディオンを開いたままにしておくという問題があります。
スクリプトは次のとおりです。
$(document).ready(function () {
$('#nav > li > a').click(function () {
if ($(this).attr('class') != 'active') {
$('#nav li ul').slideUp();
$(this).next().slideToggle();
$('#nav li a').removeClass('active');
$(this).addClass('active');
}
});
});
マークアップは次のとおりです。
<ul id="nav">
<li><a href="#">Item 1</a>
<ul>
<li><a href="#">Sub-Item 1 a</a></li>
<li><a href="#">Sub-Item 1 b</a></li>
<li><a href="#">Sub-Item 1 c</a></li>
</ul>
</li>
<li><a href="#">Item 2</a>
<ul>
<li><a href="#">Sub-Item 2 a</a></li>
<li><a href="#">Sub-Item 2 b</a></li>
</ul>
</li>
<li><a href="#">Item 3</a>
<ul>
<li><a href="#">Sub-Item 3 a</a></li>
<li><a href="#">Sub-Item 3 b</a></li>
<li><a href="#">Sub-Item 3 c</a></li>
<li><a href="#">Sub-Item 3 d</a></li>
</ul>
</li>
<li><a href="#">Item 4</a>
<ul>
<li><a href="Facilitysoft_masterdetails.aspx?view=1">Site Master</a></li>
<li><a href="Facilitysoft_masterdetails.aspx?view=2">Phase Master</a></li>
<li><a href="Facilitysoft_masterdetails.aspx?view=3">Block Master</a></li>
<li><a href="Facilitysoft_masterdetails.aspx?view=4">Subblock Master</a></li>
<li><a href="Facilitysoft_masterdetails.aspx?view=5">Floor Master</a></li>
<li><a href="Facilitysoft_masterdetails.aspx?view=6">Flat Master</a></li>
<li><a href="Facilitysoft_masterdetails.aspx?view=7">Issue Master</a></li>
<li><a href="Facilitysoft_masterdetails.aspx?view=8">Gym/Swim Master</a></li>
<li><a href="Facilitysoft_masterdetails.aspx?view=9">Stock Master</a></li>
<li><a href="Facilitysoft_masterdetails.aspx?view=10">Clubhouse Master</a></li>
</ul>
</li>
</ul>
たとえば、「アイテム4」をクリックしてから「クラブハウスマスター」をクリックすると、そのアコーディオンが折りたたみ可能になり、その特定の状態を維持する必要が生じた後、その特定のaspxページが表示されます。