jQuery code breaks anchor links of the whole website

Question

I have added jQuery for the menu navigation of my website. Unfortunately this makes all anchor links outside the menu unusable.

The jQuery code is as follows:

jQuery(function($){
$(document).ready(function(){  

// All variables needed in functions  
var menuSection = $('.fullwidth-menu');
var hamburgerIcon = $('.fullwidth-open');
var menuLink = $('.fullwidth-menu a');
var subMenu = $('.main-menu-item ul');
var toggleIcon = $('.toggle-sub-menu');
  
  
// Open fullwidth menu
hamburgerIcon.click(function(){
    $(this).toggleClass('open');
    menuSection.toggleClass('fullwidth-menu-open');
    if (menuSection.hasClass("fullwidth-menu-open")) {
  menuLink.click(function(){
  hamburgerIcon.toggleClass('open');
  menuSection.toggleClass('fullwidth-menu-open');  
  subMenu.slideUp();  
    toggleIcon.text($(this).text() == '+' ? '-' : '+');  
});

    } else { 
        subMenu.slideUp();  
        toggleIcon.text($(this).text() == '+' ? '-' : '+');  
    }
});

// Close fullwidth menu when clicking an item
menuLink.click(function(){
    hamburgerIcon.toggleClass('open');
    menuSection.toggleClass('fullwidth-menu-open');  
  subMenu.slideUp();  
    toggleIcon.text($(this).text() == '+' ? '-' : '+');  
});
  
// Change icon when toggling the submenu  
toggleIcon.click(function(){  
    var subMenu = $(this).parent().find("ul");
    subMenu.slideToggle(); 
    $(this).text($(this).text() == '-' ? '+' : '-'); 
});  
  
});
});
  
</script>

I think the error comes from the following variable which takes into account all tags:

var menuLink = $('.fullwidth-menu a');

The HTML of a menu item is as follows:

<div class="et_pb_text_inner"><a href="#">Verpackungen</a>&nbsp;<span class="toggle-sub-menu" style="color: #fff;">+</span><p></p>
<ul>
<li><a href="/wellpappe">Wellpappe</a></li>
<li><a href="/vollpappe">Vollpappe</a></li>
<li><a href="/schaumstoff">Schaumstoff</a></li>
<li><a href="/hohlkammerplatten">Hohlkammerplatten</a></li>
<li><a href="/folien">Folien</a></li>
<li><a href="/styropor">Styropor</a></li>
<li><a href="/tragetaschen">Tragetaschen</a></li>
<li><a href="/holz">Holz</a></li>
</ul>
</div>

Unfortunately, I also can't manage to narrow down the jQuery code to just menu links using a separate CSS ID. The jQuery code breaks all anchor links of the whole website.

Can anyone help me with this problem? Have I written a bug in jQuery that may be causing this problem?

I am very grateful for your help

Kind regards Sven

jQuery code breaks anchor links of the whole website

0 Answers0