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

【问题标题】：Remember selected panel when going back to Menu tab from Languages tab?从语言选项卡返回菜单选项卡时还记得选择的面板吗？
【发布时间】：2019-01-17 14:40:10
【问题描述】：

我已经实现了 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>"
     ]
}]

【问题讨论】：

标签： mmenu

【解决方案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);
        });

【讨论】：