2014-09-19 85 views
1

我有一個手風琴菜單,當您單擊「類別」以顯示子類別時,該菜單即會打開。並在您再次單擊時關閉,或者單擊其他類別。這工作正常。頁面加載時關閉手風琴菜單

基本HTML結構

<ul id="menu-products" class="menu"> 
<li><a href="#">T120 Designjet</a> 
    <ul class="submenu"> 
     <li><a class="internal" href="http://www.cancadd.ca/cms/product/hp-711-29-ml-cyan-ink-cartridge-cz130a/">HP 711 29-ml Cyan Ink Cartridge (CZ130A)</a> </li> 
     <li class="active"><a class="internal" href="http://www.cancadd.ca/cms/product/hp-711-29-ml-magenta-ink-cartridge-cz131a/">HP 71 29-ml Magenta Ink Cartridge (CZ131A)</a> </li> 
    </ul> 
</li> 
<li><a href="#">T520 Designjet</a> 
    <ul class="submenu"> 
     <li> <a class="internal" href="http://www.cancadd.ca/cms/product/hp-711-29-ml-cyan-ink-cartridge-cz130a/">HP 711 29-ml Cyan Ink Cartridge (CZ130A)</a> </li> 
    </ul> 
</li> 
</ul> 

JS

<script> 
$(document).ready(function() { 
$('#sidebar .menu li > a').on('click', function() { 
$('#sidebar .menu li .submenu').each(function() { 
    if($(this).is(":visible")) { 
     $(this).slideUp(); 
    } 
    }); 
    if($(this).parent('li').children('.submenu').length) { 
    if(!$(this).parent('li').children('.submenu').is(":visible")) { 
     $(this).parent('li').children('.submenu').slideToggle(); 
    } 
    return false; 
    } 
}); 
}); 
</script> 

然而,當我點擊一個子類項目,進入該頁面,菜單默認爲關閉狀態。

我只想要在頁面加載時打開子類別項目的菜單,但我不確定如何修改此代碼來完成此操作。

這裏是我的網站上的示例頁面:http://www.cancadd.ca/cms/product/hp-711-29-ml-yellow-ink-cartridge-cz132a/

回答

1

使用此選擇:

$('#sidebar .menu li .submenu li.active').closest('.submenu'); 

然後只需撥動該頁面加載開放。

+0

謝謝@ Chrisbloom7!我剛剛添加了'.css(「display」,「block」)',並且它完美地工作 – 2014-09-22 16:40:40