Javascript 如何在调整窗口大小时切换引导导航菜单

我注意到许多wordpress主题中使用的引导导航菜单，包括相对常见和免费的店面主题，在功能上似乎有些不完整。我最近遇到的一个问题是，当你调整窗口大小时，小窗口上会出现一个压缩的导航按钮，然后点击该按钮展开菜单以查看主页、商店等，然后在导航菜单仍处于打开状态时，将窗口重新调整为非常大的尺寸，它只是因为仍处于切换状态而消失

---

因此，问题是如何更新主题以解决此问题，从而在调整窗口大小时关闭菜单？

将类似内容添加到javaScript将向窗口添加一个事件侦听器，在调整窗口大小时触发导航按钮的切换：

if(window.attachEvent) {
        window.attachEvent('onresize', function() {
        alert('attachEvent - resize');
        if ( -1 !== container.className.indexOf( 'toggled' ) ) {
        container.className = container.className.replace( ' toggled', '' );
        button.setAttribute( 'aria-expanded', 'false' );
        menu.setAttribute( 'aria-expanded', 'false' );
    }
        });
}
else if(window.addEventListener) {
        window.addEventListener('resize', function() {
        //console.log('addEventListener - resize');
        if ( -1 !== container.className.indexOf( 'toggled' ) ) {
        container.className = container.className.replace( ' toggled', '' );
        button.setAttribute( 'aria-expanded', 'false' );
        menu.setAttribute( 'aria-expanded', 'false' );
    }
        }, true);
}
else {
        //The browser does not support Javascript event binding
}

您可以通过将…/themes/Storefront/inc/js/navigation.js和navigation.min.js文件复制到您的子主题下的adir，将其添加到Storefront主题中，然后将上述内容添加到我刚刚在button.onclick块后添加的复制的navigation.js文件中，然后将整个文件复制并粘贴到在线可用的脚本冷凝器中，以最小化脚本，然后用压缩代码替换子主题中navigation.min.js文件的现有内容，当然还可以保存

然后，因为子主题中的Javascript不会自动覆盖其父主题对应项，所以您必须像这样将它们排队：

add_action('wp_enqueue_scripts', 'wpse26822_script_fix', 20120207);
function wpse26822_script_fix()
{
    wp_dequeue_script('storefront-navigation');
    wp_enqueue_script('my_storefront-navigation', get_stylesheet_directory_uri().'/js/navigation.min.js', array('jquery'),20151110,true);
}

---

在这种情况下，父级调用了wp_enqueue_脚本，优先级为20120206日期，因此此操作添加的优先级略高，以便立即将其退出队列。然后，后面的enqueue语句实际上会在该语句之后进行优先级排序，以确保它在旧语句退出队列后加载。在本例中，true也很重要，因为它指定要在页脚中排队，而页脚是父脚本第一次排队的地方

将.menu\u类替换为菜单ul的类

$window.resizefunction{ 如果$window.width>992{ $.menu\u class.removeAttrstyle； } };

---

哎呀，忘了注释掉我为调试添加的console.log行。。。