Question

我正在使用下面的代码将一些类添加到WordPress菜单中，以便它可以在移动设备上运行。唯一的问题是preventDefault，它禁用具有子菜单的菜单项的默认单击操作，而是转到下一级，运行，当您查看桌面站点时，顶级菜单项不可单击。我如何更改代码以便窗口调整大小，javascript运行移动但在更大的窗口（例如大于768px），代码不运行并且preventDefault被忽略？

$(document).ready(function() {
        // Adding 'has-submenu' class to first level for mobile
        $('.menu > ul > li > ul.sub-menu').closest('li').addClass('has-submenu');

        // JS media query for disabling and enabling top level click
        var $menu = $('#menu'),
        $menulink = $('.menu-link'),
        $menuTrigger = $('.has-submenu > a');

        $menulink.click(function(e) {
            e.preventDefault();
            $menulink.toggleClass('active');
            $menu.toggleClass('active');
        });

        $menuTrigger.click(function(e) {
            e.preventDefault();
            var $this = $(this);
            $this.toggleClass('active').next('ul').toggleClass('active');
        });
    });

这是一个jsfiddle。请注意，在响应时，单击父菜单项会扩展菜单。这就像我想要的那样。但是，当您将其吹到较大的桌面版本时，请注意，preventDefault禁止您单击父菜单项。我希望这些可以在更大的桌面版本上点击。

http://jsfiddle.net/2U8Md/

如何让这个响应式菜单在桌面上调整窗口大小？

0 个答案: