在父頁面上顯示/隱藏子元素

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