Question

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

菜单项1
菜单项2
- 子菜单项
菜单项3

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

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

Here is the page I am working on currently

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

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来实现，如果可能的话，这比使用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
});

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

4 个答案: