Chrome 未捕获的语法错误：意外的令牌 <答案

【问题标题】：Chrome Uncaught Syntax Error: Unexpected Token <Chrome 未捕获的语法错误：意外的令牌 <
【发布时间】：2016-01-25 09:21:50
【问题描述】：

我正在运行此脚本以显示不同的移动菜单：

<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

我无法弄清楚代码有什么问题，任何帮助将不胜感激。

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

【问题讨论】：

这是因为您的 PHP 代码在 JS script 块内生成 HTML - 因此出现语法错误。我不太确定你想要达到什么目的。
你想用php代码实现什么？
我正在尝试显示在register_nav_menu()注册的菜单
如果您使用媒体查询，对性能的影响将是微不足道的，因为导航将设置为 display:none

标签： javascript jquery wordpress google-chrome

【解决方案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>

【讨论】：

我会在 CSS 中使用媒体查询隐藏其中一个。