Помните выбранную панель при переходе на вкладку «Меню» на вкладке «Языки»? - PullRequest
Новая
       15

Помните выбранную панель при переходе на вкладку «Меню» на вкладке «Языки»?

0 голосов
/ 17 января 2019

Я реализовал вкладку «Языки», показанную на 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>"
     ]
}]

1 Ответ

0 голосов
/ 17 января 2019

Мое решение

Мои 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);
        });
...