2014-09-19 55 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