Chrome Uncaught Ошибка синтаксиса: Неожиданный Токен <

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> 

Но я получаю ошибку хромом «неперехваченным SyntaxError: Неожиданный маркер <» указывает на My что линия:

Я не могу понять, что не так с кодом, любая помощь будет оценена.

EDIT: ну, не знаю, есть проблема с запуском php внутри js. Итак, каково подходящее решение для моей ситуации? Я знаю, что могу использовать css-медиа-запросы и свойство отображения, но это плохо для производительности, не так ли?

Answer 1

Вы не можете просто вывести HTML-код внутри блока Javascript. И поскольку 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> 

Надежда это помогает.

(Update. Благодаря Рафи для напоминания.)

Оригинальное решение просто скорректировали 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>