Chrome Uncaught语法错误：意外令牌＆lt;

Question

我正在运行此脚本，以便为移动设备显示不同的菜单：

<script>
    jQuery(document).ready(function($){
        if ($(window).width() > 750){
            <?php wp_nav_menu( array( 'theme_location' => 'primary', 'container' => false, 'menu_class' => 'menu clearfix' ) ); ?>
        }else{
            <?php wp_nav_menu( array( 'theme_location' => 'mobile', 'container' => false, 'menu_class' => 'menu clearfix' ) ); ?>
        }
    });
</script>

但我得到chrome的错误“Uncaught SyntaxError：Unexpected token＆lt;”指着那条线：

我无法想象代码是什么错，任何帮助将不胜感激。

编辑：好吧，不知道在js中运行php有问题。 那么什么是我的情况的正确解决方案？我知道我可以使用css媒体查询和显示属性，但它对性能不好，不是吗？

Answer 1

您不能简单地在Javascript块中输出HTML代码。由于PHP在服务器端运行，因此无法获得屏幕大小。

您可能要做的一件事是将两个菜单的HTML输出到隐藏的<div>标记中：

<div id='menu_primary' style="display:none">
  <?php wp_nav_menu( array( 'theme_location' => 'primary', 'container' => false, 'menu_class' => 'menu clearfix' ) ); ?>
</div>
<div id='menu_mobile' style="display:none">
  <?php wp_nav_menu( array( 'theme_location' => 'mobile', 'container' => false, 'menu_class' => 'menu clearfix' ) ); ?>
</div>

然后决定在加载页面时显示哪一个：

<script>
    jQuery(document).ready(function($){
        if ($(window).width() > 750){
            $('#menu_primary').show();
        }else{
            $('#menu_mobile').show();
        }
    });
</script>

希望这有帮助。

（更新。感谢Rafi提醒。）

原始解决方案只是调整了jquery调用以使其正常工作。但它只在加载页面时检测一次屏幕大小。实现响应的更好方法是使用CSS媒体查询，当屏幕大小发生变化时，它将动态显示/隐藏不同的菜单版本：

<div id='menu_primary'>Primary</div>
<div id='menu_mobile'>Mobile</div>

<!-- CSS media query within a stylesheet -->
<style>
@media (max-width: 750px) {
  #menu_primary { display: none; }
}
@media (min-width: 750px) {
  #menu_mobile { display: none; }
}
</style>