如何删除菜单图标上的超链接，但它应该打开子菜单？

Question

我的问题是当我点击菜单的图标（如加号或下拉菜单）时，如果它有任何链接，它不应该移动到页面，但它首先显示子菜单，然后只 我已经应用了这个 JS：

let plus = document.querySelectorAll(".menu-item > a");
console.log(plus);
for (var i = 0; i < plus.length; i++){
  console.log(plus[i]);
  plus[i].addEventListener("click",(e)=>{
    let plusParent = e.target.parentElement;
    console.log(plusParent);    
    plusParent.classList.toggle("showMenu");
  });
}

in this image you can check where I want to open submenu on click icon's but not redirect to parent icon's link

Answer 1

我认为你需要先防止标签事件，这样它就不会跳转到链接。你可以使用 e.preventDefault() 来做同样的事情。

let plus = document.querySelectorAll(".menu-item > a");
console.log(plus);
for (var i = 0; i < plus.length; i++){
  console.log(plus[i]);
  plus[i].addEventListener("click",(e)=>{
    if (e.target.classList.contains('fa-plus')) {
      e.preventDefault(); // prevent link to open new page because plus icon is clicked
    }

    let plusParent = e.target.parentElement;
    console.log(plusParent);    
    plusParent.classList.toggle("showMenu");
  });
}