Jquery mmenu 多个实例

Posted 2023-05-08

【中文标题】Jquery mmenu 多个实例

【英文标题】：Jquery mmenu multiple instances

【发布时间】：2015-01-05 22:11:38

【问题描述】：

我需要使用菜单来实现 mmenus 的实例。第一个工作正常（太棒了），它位于左侧，但我无法从右侧添加第二个开口。

我需要在固定顶栏上添加第二个图标菜单，希望是自定义的，并使用它来打开第二个菜单。但是，一旦我添加了第二个菜单的代码，第一个菜单就会停止工作，因为图标菜单（在 eft 侧）打开了第二个菜单 下面是一些代码。左侧菜单的id是#menu，右侧菜单的id是#listPanel

<div id="page">
    <div class="header">
        <a href="#menu"></a>
        Event Name 2  - Race Name
        <a href="#listPanel"></a>
    </div>

    <div id="mapContainer">
        <div id="map_canvas"></div>
    </div>

    <div class="footer ">
        Real-time News
    </div>

    <nav id="menu">
        <ul>
            <li><a href="../index.html"><i class="fa fa-home"></i>  Home</a></li>
            <li><a href="index.html"><i class="fa fa-globe"></i>  Map</a></li>                  
            <li><a href="athList.html"><i class="fa fa-list"></i>  Lista Atleti</a></li>
            <li><a href="liveTracking.html"><i class="fa fa-map-marker"></i>  Live Tracking</a></li>
            <li><a href="stops.html"><i class="fa fa-clock-o"></i>  Intermedi</a></li>
            <li><a href="performance.html"><i class="fa fa-dashboard"></i>  Prestazioni</a></li>
            <li><a href="rank.html"><i class="fa fa-list-ol"></i>  Classifica MySdam</a></li>
            <li id="sponsorMenu"><img src="images/sponsor/LogoSM.png"  width='90%'></li>
        </ul>
    </nav>

    <nav id="listPanel">
        <ul>
            <li><a href="../index.html"><i class="fa fa-home"></i>  Home</a></li>
        </ul>
    </nav>  
</div>

而查询码是

$(function() 
    $("#menu").mmenu(         
        "offCanvas": 
          "zposition": "front"
       ,
       "header": 
          "title": "Menu",
          "add": true,
          "update": true
       ,
        "footer": 
          "add": true,
          "title": "Smartrack @ 2014"
       
    );

    $("#listPanel").mmenu(
       "offCanvas": 
          "zposition": "front",
          "position": "right"
       
    );  
 );

Fiddle

我确实在 mmenu 站点和堆栈溢出中搜索了很多解决方案，但我没有找到任何解决方案。 我哪里错了？？

感谢支持

【问题讨论】：

Fiddle 已更新以修复丢失的 HTML（我的错误）。似乎工作正常。 jsfiddle.net/isherwood/yhta5ux7

【参考方案1】：

我不确定我是否完全理解您想要做什么。如果只是打开菜单的问题，您可以这样排列 HTML：

<div id="page">
    <div class="header">
        <a href="#menu">Menu Left</a>
        <a href="#listPanel">Menu Right</a>
    </div>
    <nav id="menu">
        <ul>
            <li>
                <a href="../index.html"><i class="fa fa-home"></i>  Home</a>
            </li>
            <li>
                <a href="index.html"><i class="fa fa-globe"></i>  Map</a>
            </li>
        </ul>
    </nav>
    <nav id="listPanel">
        <ul>
            <li><a href="../index.html">
                <i class="fa fa-home"></i>  Home</a>
            </li>
        </ul>
    </nav>
</div>

这会添加另一个导航元素，将一些文本放入锚元素中，并在this fiddle 中按预期工作。我真诚地希望这就是您想要的:)。

【讨论】：

我添加了小提琴，而我的原始版本缺少其中一个菜单的 HTML。这可能造成了一些混乱。不过，正如您所说，尽管 OP 声明了什么，但它仍然有效。

是的，谢谢，肯定有帮助。我得到了一个部分解决方案，那就是我必须分离菜单。我现在需要的是有两个单独的菜单图标，标准的一个在左侧，第二个在标题栏的右侧。实施这个解决方案我得到重叠的 ICons <a href="#menu"></a> Event Name 2 - Race Name <a href="#listPanel"><span id="panelButton" class="glyphicon glyphicon-chevron-left"></span></a> 。我哪里错了？再次感谢您的宝贵支持

对不起，我只是不明白你的意思。你能做一个 jsfiddle 来描述你的代码问题吗？

谢谢，我解决了。这是我的错误。问题与 2 菜单图标的定位有关。再次感谢

嗨乔瓦尼，如果我的回答有用并解决了你的问题，你应该点击复选标记接受它:)。