页面加载时关闭手风琴菜单
问题描述:
我有一个手风琴菜单,当您单击“类别”以显示子类别时,该菜单即会打开。并在您再次单击时关闭,或者单击其他类别。这工作正常。页面加载时关闭手风琴菜单
基本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/
答
使用此选择:
$('#sidebar .menu li .submenu li.active').closest('.submenu');
然后只需拨动该页面加载开放。
谢谢@ Chrisbloom7!我刚刚添加了'.css(“display”,“block”)',并且它完美地工作 – 2014-09-22 16:40:40