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

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;
}