Question

我已经实现了https://mmenujs.com/documentation/addons/navbars.html上显示的“语言”标签，但是当我从“语言”标签返回时，我想一种方法来记住位置/活动菜单面板。

我现在正在使用API通过可见导航中的图标打开两个面板：

$(".mobile-lang").on("click", function() {
   api.open().openPanel( $("#languages-panel") );
});

$(".mobile-nav").on("click", function() {
   api.open().openPanel( $("#menu-panel") );
});

另外，我的导航栏设置如下：

navbars: [{
    "position": "top",
    "type": "tabs",
    "content": [
        "<a href='#menu-panel'>" + mmenuMenu + "</a>",
        "<a href='#languages-panel'>" + mmenuLanguages + "</a>"
     ]
}]

Answer 1

我的解决方案

我始终可见的导航中的html按钮元素：

<a href="#mmenu" class="mobile-nav">Open current menu panel</a>
<a class="mobile-lang">Open languages panel</a>

我的JS

         var currentMMStep = "menu-panel";

         $("#mmenu").mmenu({
            // options
            pageScroll: {
                  scroll: true,
                  update: true // pageScroll options
                },
            extensions: [
                "pagedim-black",
                "position-front",
                "position-right",
                "shadow-panels"
            ],
            navbars: [{
               "position": "top",
               "type": "tabs",
               "content": [
                  "<a href='#menu-panel' id='the-menu-panel'>" + mmenuMenu + "</a>",
                  "<a href='#languages-panel'>" + mmenuLanguages + "</a>"
               ]
            }]

        }, {
         // configuration
            clone: false,
            offCanvas: {
                pageSelector: "#page-wrap"
            }
        });

        var api = $("#mmenu").data( "mmenu" );

        $(".mobile-lang").on("click", function() {
            api.open().openPanel( $("#languages-panel") );
        });

        api.bind( "openPanel:before", function( $panel ) {
            if(!$("#languages-panel").hasClass("mm-panel_opened")){
                currentMMStep = $(".mm-panel_opened").attr("id");
                $("#the-menu-panel").attr('href', "#" + currentMMStep);
            }
        });
        api.bind( "openPanel:finish", function( $panel ) {
            if(!$("#languages-panel").hasClass("mm-panel_opened")){
                currentMMStep = $(".mm-panel_opened").attr("id");
                $("#the-menu-panel").attr('href', "#" + currentMMStep);
            }
        });

        api.bind("closeAllPanels:before", function() {
            $("#the-menu-panel").data('href', "#" + currentMMStep);
        });

        //because we alter the #menu-panel href on the Menu tab it removes the selected class when clicking the mm-navbar__title...
        $(".mm-navbar__title").on("click", function() {
            setTimeout(function(){ 
            $(".mm-navbar_tabs a:first-child").addClass("mm-navbar__tab_selected");
            }, 40);
        });

还记得从“语言”选项卡返回“菜单”选项卡时选择的面板吗？

1 个答案: