настраиваемая тема wordpress - getelementbyid для доступа к элементу в заголовке. php возвращает null - PullRequest
Новая
       27

настраиваемая тема wordpress - getelementbyid для доступа к элементу в заголовке. php возвращает null

0 голосов
/ 04 августа 2020

Я новичок в Wordpress dev. Я пытаюсь добавить раскрывающееся меню гамбургера, но при попытке вызвать значок для щелчка по getElementbyID по какой-то причине возвращается значение null. Другой код в файле js регистрируется, поэтому я верю, что он закодирован правильно. Я не уверен, есть ли какой-то аспект дерева DOM или кодировки тем WordPress, который мне не хватает. Приветствуется любая помощь.

в заголовке. php

<div id="nav_icon_burger_x"> 
      <span></span>
      <span></span>
      <span></span>
      <span></span>
    </div>

в приложении. js

const mobileNavIcon = document.getElementById('nav_icon_burger_x');

mobileNavIcon.addEventListener('click', function () {
    mobileNavIcon.toggleClass('open');
});

в функциях. php

function include_js_files() {
    wp_enqueue_script('idm250-js', get_template_directory_uri() . '/dist/scripts/app.js');
}

// When WP performs this action, call our function
add_action('wp_enqueue_scripts', 'include_js_files');

1 Ответ

0 голосов
/ 04 августа 2020

Что-то, что меня спасло, в первую очередь, это добавление простого свойства onclick к кнопке меню. Вот так: 

<div onclick="toggleFunction(event)"> 
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>

Затем вы помещаете свою функцию где угодно: 

function toggleFunction(e){          
  e.target.classList.toggle('open');
}

В вашем коде также есть проблема, toggleClass от jQuery, поэтому вам нужен Jquery элемент для переключения его классов, в ванили вы можете использовать classList.toggle ('yourClass')

Если вам нужно использовать jQuery для этого, используйте свою функцию следующим образом: 

$('#nav_icon_burger_x').toggleClass('open')

Внутри вашей функции addEventListener

Вы можете go дальше и сделать событие щелчка из jQuery Вот так: 

$('#nav_icon_burger_x').click( function() {
  $(this).toggleClass('open');
});


function toggleFunction(e){          
  e.target.classList.toggle('open');
}
div{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  width:30px;
  height:36px;
  cursor:pointer;
}
span{
  background-color:black;
  height:10px;
  width:30px;
  margin-bottom:2px;
  
}
.open{
  background-color:blue;
}
<div onclick="toggleFunction(event)"> 
      <span></span>
      <span></span>
      <span></span>
</div>

Надеюсь, это поможет вам достичь вашей цели.

...