Question

我注意到许多wordpress主题中使用的bootstrap导航菜单，包括相对常见且免费的Storefront WooTheme，在功能上似乎有些不完整。我最近遇到的一个问题是，当您调整窗口大小以便在小窗口上获得压缩导航按钮时，您单击该按钮以展开菜单（以查看“主页”，“购物”等） ...），然后当你将窗口调整到一个非常大的尺寸并且导航菜单仍然打开时，它就会消失，因为它仍然处于切换状态。

所以问题是如何更新主题以解决此问题，以便在调整窗口大小时菜单切换为关闭？

Answer 1

在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 WooTheme navigation.js文件（我在button.onclick块之后添加它），然后将整个文件复制并粘贴到脚本电容器（可在线提供）以最小化脚本，然后替换navigation.min.js文件的现有内容在您的孩子主题中使用浓缩代码，当然保存。

然后，因为子主题中的JavaScripts不会自动覆盖它们的父主题对应物，所以你必须将它们排列为：

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_scripts由父级调用，优先级为20120206（日期），因此添加的操作优先级稍大一些，以便立即出列。然后，接下来的后面的enqueue语句实际上是优先级，以确保它在旧的队列出列后加载。在这种情况下，“true”也很重要，因为它指定它将在页脚中排队，这是父脚本首次排队的位置。

Answer 2

将“.menu_class”替换为菜单ul。

的类

$(window).resize(function(){

  if ($(window).width() > 992) {
    $(".menu_class").removeAttr("style");
  }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

如何在窗口大小调整

2 个答案: