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

Question

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

3

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

- leonidas56

但是，“项目本身”不是指向页面的链接吗？那么用户怎么能够访问到那个页面呢？ - digijay

@leonidas56，你是说西班牙语的开发者吗？你也许想去看看西班牙语Stack Overflow :) - Alvaro Montoro

1

@digijay 不是的，它不是一个页面链接，只是在这种情况下用于子菜单。 - leonidas56

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Alvaro Montoro · 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 可能会有问题（因为 a 可能是子级 span，会被选择为您想要的兄弟级别的 span）。