My Question Is When I click Menu's icon (like plus or dropdown) and if its have any link it shouldn't move to page but it show submenu first then only I have applied this 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

CodePudding user response：

I think you need to prevent the event of tag first so it wouldn't jump to the link. you can use e.preventDefault() for doing the same.

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