mmenu 帮助 - 如何将“Selected”类添加到当前页面（可能使用“currentItem”插件）

Posted 2023-05-08

【中文标题】mmenu 帮助 - 如何将“Selected”类添加到当前页面（可能使用“currentItem”插件）

【英文标题】：mmenu help - how to add "Selected" class to current page (maybe using "currentItem" addon)

【发布时间】：2015-11-12 03:21:39

【问题描述】：

我正在使用 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>

【参考方案1】：

您需要将“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>

我希望这会有所帮助。

德里克

【参考方案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');
    
);

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

$("#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
    
);

Here's a Fiddle.