在下拉菜单上显示ID

Question

所以，我有以下设置的下拉菜单：

https://jsfiddle.net/mboz45fv/10/

我想要实现的是，点击sub menu后，我想在sub menu空间中显示Menu的标题，如下所示。

我怎样才能做到这一点？

编辑： 所以，我意识到我不够清楚。

假设用户点击Sub Menu 2按钮，然后该用户将被定向到该页面。

此sub menu 2页面将url sub_menu_2。 例如，页面url将为.com/sub_menu_2

当用户位于menu页面时，我希望sub menu 2标题为sub menu 2。

很抱歉这个混乱。

Answer 1

这是一个可能的解决方案：https://jsfiddle.net/mboz45fv/3/

在主菜单和子菜单中添加一个类，并设置如下所示的值，

<h1>Drop Down Menu</h1>
<nav id="primary_nav_wrap">
<ul>

  <li><a class="main-menu" href="#">Menu</a>
    <ul>
      <li><a class="sub-menu" id="a" href="#">Sub Menu 1</a></li>
      <li><a class="sub-menu" id="d" href="#">Sub Menu 2</a></li>
      <li><a class="sub-menu" id="c" href="#">Sub Menu 3</a></li>
    </ul>
  </li> 
</ul>
</nav>

$('.sub-menu').on('click', function(){
    $('.main-menu').text($(this).text())
});

编辑：如果你想要＆＃39;菜单＆＃39;当用户没有关注控件时返回文本，这是解决方案：https://jsfiddle.net/mboz45fv/9/

Answer 2

不改变HTML：

$(document).ready(function() {
    $('ul li ul li a').click(function(e){
        $('#primary_nav_wrap > ul > li > a').text($(this).text());
    });
});

FIDDLE：https://jsfiddle.net/lmgonzalves/mboz45fv/7/