Switch the submenu, and if the child pressed, go to the page

Question

I created a simple switch menu that, when clicked, shows a list of children, and if you click again, it hides these visible elements.

If a child is clicked, but I want him to visit this page, only I can not get it to work? Is this due to my default warning?

// Language select in global nav $('.sub-lang').on('click', function(e) { if ($(this).hasClass('active') && $(e.target).parent().hasClass('active')) { $(this).removeClass('active'); $(this).css('height', 'auto'); $(this).children('ul').hide(); } else { $(this).addClass('active'); $(this).css('height', $(this).find('ul').height() + 65); $(this).children('ul').show(); } e.preventDefault(); }); 

Here is jsfiddle

Answer 1

Why don't you just convert your main menu item to a paragraph tag? or you can put # in your main menu item and remove the default warning. Thus, you do not need to prevent default on the main elements.

Although google.com does not load inside iFrame, you can check this script. He works.

Look at this (C # in anchors) fiddle

HTML

 <ul style=" "> <li class="sub-lang"> <a href="#">English</a> <ul style=""> <li><a href="http://www.google.com">International</a></li> <li><a href="">UK &amp; Ireland</a></li> </ul> </li> <li class="sub-lang"> <a href="#">Espanol</a> <ul style=""> <li><a href="/es-es/">Español</a></li> <li><a href="http://www.google.com">España</a></li> </ul> </li> <li class="sub-lang"> <a href="#">Francais</a> <ul style=""> <li><a href="/fr-fr/">Français</a></li> <li><a href="http://www.google.com">France</a></li> </ul> </li> </ul> 

Answer 2

Check out this out here.

Explaination

Instead of delegating the whole li event, I bound the event to all the immediate children of <a> li, and then prevented that specific element from propagating. Therefore, we do not need to figure out how to stop the event ( click in our case) from spreading to the children element.

Additionally, JSFiddle can load external iframe problems, so check the solution here .

Answer 3

Add this line before the code.

 $('.sub-lang > a').removeAttr('href'); 

Remove

 e.preventDefault(); 

this should work fine

Answer 4

You must add one condition for this.

 if($(e.target).parent().hasClass('sub-lang') ) 

This will allow you to click on the submenu.

 // Language select in global nav $('.sub-lang').on('click', function(e) { if($(e.target).parent().hasClass('sub-lang') ){ if ($(this).hasClass('active') && $(e.target).parent().hasClass('active')) { $(this).removeClass('active'); $(this).css('height', 'auto'); $(this).children('ul').hide(); } else { $(this).addClass('active'); $(this).css('height', $(this).find('ul').height() + 65); $(this).children('ul').show(); } e.preventDefault(); } }); 

 ul li ul { display: none; z-index: 2; right: 0; background-color: #fff; width: 250px; } ul li.active ul { display: block; text-align:left; background: #f1f1f1; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul style=" "> <li class="sub-lang"> <a href="">English</a> <ul style=""> <li><a href="http://www.google.com" traget="_blank">International</a></li> <li><a href="">UK &amp; Ireland</a></li> </ul> </li> <li class="sub-lang"> <a href="/es-es/">Español</a> <ul style=""> <li><a href="http://www.google.com">España</a></li> </ul> </li> <li class="sub-lang"> <a href="/fr-fr/">Français</a> <ul style=""> <li><a href="http://www.google.com">France</a></li> </ul> </li> </ul> 

Working script

Hope this helps.

Answer 5

I think you should add stopPropagation to your internal list items.

 $('.sub-lang ul li').on('click', function(e) { e.stopPropagation(); });