单击项目名称时打开/关闭子菜单

Question

我在wordpress网站（突出主题）的菜单部分遇到问题，当我在移动设备上时，我用汉堡包按钮打开菜单，并且有几个选项，有些带有子菜单，所以带有子菜单的项目仅在单击项目右侧的小箭头图标时才打开，我试图通过使其本身在单击项目本身时也使其打开，因此当您单击该项目时会触发对箭头的点击

这是菜单的

这是我要使其正常工作的javascript（仅针对具有子菜单的第一项在这里进行），我是javascript新手，但对于我所看到的我认为这应该有效（我正在使用代码片段 WordPress插件）

<?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的answear外，我还需要将所有内容都封装在带有DomLoaded的eventListener中，这是最终代码

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 } );

Answer 1

对于您似乎想要的东西，您几乎拥有了。唯一似乎缺少的是防止您单击链接时的默认行为（如上面的注释所述，这可能是潜在的问题，因为现在无法通过菜单访问链接的页面）。

使用.preventDefault()，您将针对该事件阻止该元素的默认操作，因此只需添加以下内容即可：

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);

el2.onclick = function() {
  console.log("Clicked on the span");
}

el.onclick = function(e) {
  e.preventDefault();
  el2.click(); // removed the $
};

<ul class="menu">
  <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-5812">
    <a href="#">Supervivencia</a>
    <ul class="sub-menu">
      <li><a href="super1.html">Supervivencia 1</a></li>
      <li><a href="super2.html">Supervivencia 2</a></li>
      <li><a href="super3.html">Supervivencia 3</a></li>
    </ul>
    <span class="ocm-drowndown-arrow" style="top: 17.5px">
      <i class="fa-angle-down"></i>
    </span>
  </li>
</ul>

正如他们在评论中指出的那样，由于可能无法在菜单上访问链接的页面，因此可能不太有用，您可能需要添加一些条件（检查窗口大小或变量/类，以表明移动菜单处于活动状态）以执行该preventDefault()。

除此之外，您可能要考虑更改el和el2的选择器，因为它们不是特定的并且可以匹配多个元素。我知道您正在使用querySelector，因此只会返回与选择器匹配的第一个元素，这对el来说应该不是问题，但对于el2来说可能是有问题的（因为{{ 1}}可能是一个孩子a，该孩子将从您想要的同一个孩子中被选中。）