wordpress 自定義主題 - getelementbyid 以訪問 header.php 中的元素返回 Z37A6259CC0C461DAE299Z0D76

Question

我是 Wordpress 開發人員的新手。 我正在嘗試添加一個漢堡菜單下拉菜單，但是由於某種原因，嘗試通過 getElementbyID 調用要單擊的圖標會返回 null 。 js 文件中的其他代碼正在注冊，所以我相信我的編碼正確。 我不確定 DOM 樹的某些方面或我缺少的 wordpress 主題的編碼。 任何幫助是極大的贊賞。

在 header.php

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

在 app.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');

Answer 1

首先拯救了我的是向菜單按鈕添加一個簡單的 onclick 屬性。 像這樣：

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

然后你把你的 function 放在任何地方：

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

您的代碼也存在問題，toggleClass 來自 jQuery，因此您需要一個 Jquery 元素來切換其類，您可以在 vanilla 上使用 classList.toggle('yourClass')

如果您需要為此使用 jQuery，請像這樣使用您的 function：

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

在你的 addEventListener function

您可以進一步 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>

希望這可以幫助您實現目標。