How can I fix links that don't work in a minimized menu?

user_16482911 0
Viewed 32

I have a pretty typical menu where the top items have children that fly out when you roll over. Works great above 992px. Below 992, you're supposed to click/tap the top item to get the flyout. That works fine, you get the pointer and even the file name in the link preview. But when you click/tap, it just stays on the same page and the flyout collapses. The only thing I can find is the statement below in javascript. If you delete it, the flyouts don't work at all. If you delete && e.preventDefault(), the top links work but the flyout doesn't happen.

document.addEventListener("click",function(e){
   e.target.closest(".menu-item-has-children") && window.innerWidth <= 992 && e.preventDefault()
})

https://dmvnv.com/2021/

preventdefault javascript
1 Answers

Found the answer.

The preventDefault is passed on from the parent to the children (like the bad genes that left you cross-eyed).

You need to stop the propagation. In this case, the children are list items in a second unordered list with a class of sub-menu.

    $('.sub-menu').on("click", function(e){
        e.preventDefault();
     }).children().click(function(e) { // catch all children click
        e.stopPropagation();
     });

Javascript, Stop preventDefault() to pass to child element

user_164829110
Related