0

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

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

4

2 回答 2

0

向您的 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 文件的现有内容使用该压缩代码的主题，当然要保存。

然后，由于子主题中的 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_scripts 由父级调用，优先级为 20120206（日期），因此添加此操作的优先级略高，以便立即出列。然后，紧随其后的入队语句实际上在其后优先，以确保它在旧的出队后加载。在这种情况下，“true”也很重要，因为它指定它要在页脚中排队，这是父脚本第一次排队的地方。

于 2015-11-11T01:12:12.380 回答
0

将“.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>

于 2015-11-11T01:15:37.623 回答