Question

我使用mmenu创建菜单。虽然我可以就是否使用jquery或PHP（最佳实践建议）提出建议，但我需要能够轻松地在每个新页面上包含我的菜单。我希望这会让更新变得更容易。

问题是mmenu似乎没有自动激活页面加载时的活动li。单击指向新页面的链接后，li会显示为已选中，但是一旦加载新页面并且脚本重新开始，我就会到达主菜单。由于我有子菜单，这个问题可能会进一步复杂化。

我尝试过使用第三方＆＃34; currentitem＆＃34; mmenu的插件没有成功。

这是一个简化的菜单示例。

    <div id="container">
        <header>
            <h1>Header</h1>
        </header>

        <div id="main">
            <div id="row">
                <nav>
                    <ul>
                        <li><a href="#">Nav 1</a></li>
                        <li><a href="#">Nav 2</a></li>
                        <li><a href="#">Nav 3</a></li>
                    </ul>
                </nav>

                <div id="page">
                    <h2>Manage Content</h2>

                    <p>Content</p>
                </div>
            </div>
        </div>

        <footer>
            <p>Copyright 2015, </p>
        </footer>
    </div><!-- This Close Container -->
</body>

Answer 1

您需要添加“已选择的”等级＆＃39;对于活动href的父li标签，这将使您的菜单在正确的位置打开。

<nav id="menu">
<li>
   <ul>
      <li class="mm-selected"><a href="/root/page1.html">page1</a></li> <-- this will be highlighted and will open the sub menu below.
      <li>
          <ul> <-- this sub menu will show when the parent is selected
               <li><a href="/root/page2.html">page2</a></li>
               <li><a href="/root/page3.html">page3</a></li>
          </ul>
      </li>
   </ul>
</ul>
</nav>

我希望这会有所帮助。

德里克

Answer 2

如果我正确理解了这个问题，我只需遍历<a>代码，直到找到与window.location.href.indexOf(href)匹配的内容。如果您有一个非常大的菜单，我相信这里的其他人可能会推荐一个更优化的解决方案 - 在这种情况下，使用PHP准备这个类会更好。

$('#menu a').each(function(){
    var href = $(this).attr('href');

    if ( window.location.href.indexOf(href) >= 0 ){
        $(this).parent('li').addClass('current-page');
    }
});

然后，将current-page类设置为classNames的{{1}}配置初始化Mmenu。

selected

Here's a Fiddle.

mmenu帮助 - 如何添加＆＃34;选择＆＃34; class to current page（也许使用＆＃34; currentItem＆＃34; addon）

2 个答案: