javascript - 让mmenu.js在宽屏上打开，也可以关闭

Question

我正在制作用 mmenu.js 制作的菜单，以便在宽屏上打开时打开，在中到移动设备上关闭时打开。但我也希望在宽屏上能够使用切换按钮将其关闭。

目前，您只能在移动设备上关闭它。

这是一个 fiddle

        $(function() {
            var $menu = $('nav#menu'),
                $html = $('html, body');

            $menu.mmenu({
                extensions: ["widescreen", "theme-dark"]
            });

            var $anchor = false;
            $menu.find( 'li > a' ).on(
                'click',
                function( e )
                {
                    $anchor = $(this);
                }
            );

            var api = $menu.data( 'mmenu' );
            api.bind( 'closed',
                function()
                {
                    if ( $anchor )
                    {
                        var href = $anchor.attr( 'href' );
                        $anchor = false;

                        //  if the clicked link is linked to an anchor, scroll the page to that anchor 
                        if ( href.slice( 0, 1 ) == '#' )
                        {
                            $html.animate({
                                scrollTop: $( href ).offset().top
                            }); 
                        }
                    }
                }
            );
        });

Answer 1

您可以创建一个假按钮，使其看起来像菜单按钮。

<a href="#fake-bttn"></a>

然后添加 jquery 以在 #my-mmenu 容器和 .mm-page 容器上切换类。

$("#fake-bttn").click(function(){
    $("my-mmenu").toggleClass("close");
    $("div.mm-page").toggleClass("close");  
});

然后将以下内容添加到 mmenu 的 Widesceen.css 中。

.mm-slideout {
  -webkit-transition: width 1s; /* Safari */
  transition: width 1s;
}
.mm-page.mm-slideout.close {
  width: 100% !important;
  margin-left: 0% !important;
}
.mm-menu.mm-widescreen {
  -webkit-transition: width 1s; /* Safari */
  transition: width 1s;
  min-width: 0% !important;
}
.mm-menu.mm-widescreen.close {
  min-width: 0% !important;
  width: 0% !important;
}

我还必须在 Widescreen.css 中的 .mm-page 容器中添加一个 float

.mm-page { float:right }

然后根据您为 Widescreen.css 拥有的相同媒体查询值隐藏按钮。