2

我正在使用 mmenu 创建菜单。虽然我愿意接受有关是否使用 jquery 或 PHP（最佳实践建议）的建议，但我需要能够轻松地将我的菜单包含在每个新页面上。我希望这使更新更容易。

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

我曾尝试为 mmenu 使用第 3 方“currentitem”插件，但没有成功。

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

<nav id="menu">
<li>
   <ul>
      <li><a href="/root/page1.html">page1</a></li>
      <li>
          <ul>
               <li><a href="/root/page2.html">page2</a></li>
               <li><a href="/root/page3.html">page3</a></li>
          </ul>
      </li>
   </ul>
</ul>
</nav>
4

2 回答 2

2

您需要将“mm-selected”类添加到活动 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>

我希望这有帮助。

德里克

于 2017-01-02T20:33:22.973 回答
1

如果我正确理解了这个问题，我会遍历<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');
    }
});

然后，初始化 Mmenu 并将current-page类设置classNames为selected.

$("#menu").mmenu({
    //Options        
    "offCanvas": {
        "zposition": "front" //Just an example option
    }
}, {
    //Configuration
    classNames: {
        selected: "current-page" //Change this class to match the default li you want
    }
});

这是一个小提琴。

于 2015-11-25T03:31:57.960 回答