Question

我有一个手风琴菜单，当你点击＆＃34;类别＆＃34;显示子类别。再次单击它时关闭，或单击其他类别。这很好。

基本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/

Answer 1

使用此选择器：

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

然后只需在页面加载时切换打开。

手风琴菜单在页面加载时关闭

1 个答案: