我在WordPress网站(Salient主题)的菜单部分遇到了问题。当我使用移动设备时,通过汉堡按钮打开菜单,有几个选项,其中一些带有子菜单。只有在单击项目右侧的小箭头图标时,带有子菜单的项目才会打开。我正在尝试使它也在单击项目本身时打开,方法是使单击项目时触发对箭头的单击。
这是菜单的HTML。
以下是我用 JavaScript 编写的代码,以使其正常工作(仅适用于此处的第一个带子菜单的项目),我刚开始接触 JavaScript,但根据我所见,我认为这应该可以工作(我在 WordPress 中使用 Code Snippets 插件)。
<?php
add_action( 'wp_footer', function () { ?>
<script>
var el = (document.querySelector('.menu-item.menu-item-type-custom.menu-
item-object-custom.menu-item-has-children.menu-item-5812 a'));
console.log(el);
var el2 =(document.querySelector('.menu-item.menu-item-type-custom.menu-
item-object-custom.menu-item-has-children.menu-item-5812 span'));
console.log(el2);
el.onclick = function()
{
$el2.click();
};
</script>
<?php } );
?>
解决方案:
除了Alvaro Montoro的答案外,我需要在一个DomLoaded事件监听器中封装所有内容,以下是最终代码:
add_action( 'wp_footer', function () { ?>
<script>
document.addEventListener('DOMContentLoaded', function() {
var elSupervivencia = document.querySelector('#slide-out-widget-area > div >
div.inner > div > ul:nth-child(1) > li.menu-item.menu-item-type-custom.menu-
item-object-custom.menu-item-has-children.menu-item-5812 > a');
console.log(elSupervivencia);
var elSupervivenciaFlecha = document.querySelector('#slide-out-widget-area >
div > div.inner > div > ul:nth-child(1) > li.menu-item.menu-item-type-
custom.menu-item-object-custom.menu-item-has-children.menu-item-5812 .ocm-
dropdown-arrow i');
console.log(elSupervivenciaFlecha);
elSupervivenciaFlecha.onclick = function() {
console.log("Clicked on the span");
}
elSupervivencia.onclick = function(e)
{
e.preventDefault();
elSupervivenciaFlecha.click();
};
});
</script>
<?php } );