Как переключить начальное навигационное меню на размер окна

Question

Я заметил, что меню навигации бутстрапа, используемое во многих Wordpress-темах, включая относительно распространенный и бесплатный 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 
} 

Вы можете добавить это в витрину WooTheme путем копирования .. ./themes/storefront/inc/js/navigation.js и файлы navigation.min.js для adir под вашей дочерней темой, а затем добавьте вышеуказанный файл в этот скопированный файл 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, который следует за этим, фактически имеет приоритет после этого, чтобы обеспечить его загрузку после того, как старый был удален. «Истина» в этом случае также важна, потому что это указывает на то, что она должна быть заключена в нижнем колонтитуле, где исходный скрипт был сначала выставлен в очередь.

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>