jquery - 在父页面上显示/隐藏子元素

Question

我正在使用 Wordpress 和该wp_nav_menu功能。我在 Wordpress 后端构建了一个示例菜单，如下所示：

• 菜单项 1
• 菜单项 2
  • 子菜单项
• 菜单项 3

我希望子菜单仅在父母或父母的孩子的页面上显示。

我不确定该怎么做。我认为 CSS/jquery 会做，但我会采取任何解决方案。

这是我目前正在处理的页面。

---

编辑：很抱歉造成混淆 - 我不想要翻转菜单，我希望它是静态的。当我在父页面上时，我希望显示子菜单（子菜单）。当我不在父页面上时，我不希望显示子链接。

Answer 1

尝试这个：

$(function(){
   $('.sub-menu').hide();
   $('.menu-item').click(function(){
       $('.sub-menu').hide();
       $(this).find('.sub-menu').show();
   });
});

Answer 2

在javascript中试试这个：

$(function(){
    $("#menu-main a[href='" + window.location.pathname + "']").next().addClass('opened');
});

在 CSS 中：

ul.opened {
    display:block;
}

Answer 3

这可以通过仅使用 CSS 来实现，如果可能，CSS 比使用 Javascript 更可取。

HTML：

<ul class="top">
    <li>first</li>
    <li>second
      <ul class="sub">
         <li>sub-first</li>
         <li>sub-second</li>
      </ul>
    </li>
    <li>third</li>
 </ul>

CSS：

ul ul.sub {
  display: none;
}

ul.top > li:hover > ul {
  color:red;
  display:block;
}

Answer 4

干得好。保持简单（和）愚蠢。这完全符合您的要求 - 隐藏子菜单，除非在父页面上。

$(function(){
   $('.sub-menu').hide(); //Hide sub menu by default
   $('.current-menu-item').children('.sub-menu')​.show();​ //Show sub menu if parent selected
});