Расширение меню не отвечает

Question

Расширение меню не отвечает

1

Я пытаюсь установить мобильное меню в дочерней теме WordPress (из Twentyseventeen), которая больше не расширяется при нажатии "menu". В основном мне приходилось разрывать заголовок, чтобы двигаться вокруг, и теперь расширенное меню арии не распознается. Вместо этого я пытаюсь использовать javascript для изменения свойства отображения ul от none до block, но это тоже не работает - в основном из-за того, что я не знаю первой вещи о js, и я просто попытался сделать что-то из бит и кусочки кода.

Демо-версия сайта размещена на сайте http://www.histeve.co.uk/testing/triangledrivertraining/

Javascript, который я пытаюсь использовать, выглядит следующим образом:

<script>
var element = document.getElementById("topMenu");
document.getElementById("navBtn").addEventListener("click", toggleNav);

function toggleNav() {
if( element.style.display == 'none' ) { 
function show() {('#topMenu').css ('display:block');}
} else {
function hide() {('#topMenu').css ('display:none'); }}
}
</script>

Это больше не выбивает ошибки, но ничего не делает.

Если у кого-то есть идеи, ваша помощь очень ценится!

Благодаря Стиву

Steve McCarthy 08 июнь 2017, в 13:44

Источник

Теги:

javascript

css

wordpress-theming

2 ответа

0

Вы должны исправить ваш оба селектора, который должен начинаться с $ (так как это wordpress, который может иметь пользовательский jquery вместо $), а также ваша функция css следующим образом.

<script>
var element = document.getElementById("topMenu");
document.getElementById("navBtn").addEventListener("click", toggleNav);

function toggleNav() {
if( element.style.display == 'none' ) { 
function show() {$('#topMenu').css ('display','block');}
} else {
function hide() {$('#topMenu').css ('display','none'); }}
}
</script>

альтернатива

Вместо использования css вы можете переключать класс, который намного проще

function toggleNav() {
  $('#topMenu').toggleClass('active');
}

затем в css

#topMenu{display: none;}

#topMenu.active{display: block;}

necilAlbayrak 08 июнь 2017, в 08:47

Ещё вопросы

Eugene Kuzmin · Accepted Answer · 2017-06-08T08-37-00.000Z

Попробуй это:

<script>
    var $topMenu = jQuery("#topMenu");
    jQuery("#navBtn").click(toggleNav);

    function toggleNav() {
        if($topMenu.is(":visible")) {
            $topMenu.hide();
        } else {
            $topMenu.show();
        }
    }
</script>

ОБНОВИТЬ:

Чтобы всегда показывать меню на рабочем столе, вы должны пойти с этим решением:

Добавьте следующие стили на свою страницу:

 <style>
    @media (max-width: 768px) {
        .menu-navigation-container {
            display: none;
        }
        .menu-navigation-container.show-on-mobile {
            display: block;
        }
    }
</style>

Добавьте это JS:

<script>
    var $topMenu = jQuery(".menu-navigation-container");
    jQuery("#navBtn").click(function(){
        $topMenu.toggleClass("show-on-mobile");
    });
</script>

Извините, только одна маленькая вещь, есть ли способ сбросить меню, чтобы показать, если окно изменено в полный размер? Маловероятно, что пользователь будет слишком сильно изменять размер экрана, но теперь, если я закрою его, то разверну окно, и меню останется скрытым. Я пытаюсь исправить с помощью window.setInterval (function checkScreen () {if ($ (window) .width ()> 785) {$ topMenu.show ();}}, 1000);
Я напишу расширенное решение через пару минут