$(document).ready(function() { $('.dropdown').click(function(e) { $(this).find('.lang-menu').toggleClass('open'); $($(e.target).find('.down-caret').toggleClass('open-caret')); e.preventDefault(); e.stopPropagation(); $(document).click(function() { $('.lang-menu').removeClass('open'); document.location.href = $(this).next().attr('href'); $('.down-caret').removeClass('open-caret'); }); }); }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="dropdown lang"> <a class="langswitch" href="/">袪校小<span class="down-caret"></span></a> <ul class="lang-menu"> <li><a href="/ua/">校袣袪</a></li> </ul> </div>

  • What problem are you trying to solve? And why do you need jQuery here? - Anton Shchyrov
  • On the site in the upper corner of the header there is a choice of language - as you see in the html code. When hovering over the ENG, the RBM menu (language selection) drops out. It is necessary that when clicking, the link <a href="/ua/"> UKR </a> would be worked out and redirected to this page. When you click, nothing happens. RBM simply closes i. $ (document) .click (function () {$ ('. lang-menu'). removeClass ('open'); $ ('. down-caret'). removeClass ('open-caret'); - Oleg Glushchenko
  • At least not when you hover, and when you click. Well, the menu pops up, well, click. Why jQuery? - Anton Shchyrov
  • When you click jQuery hides the RBM, but also has to redirect to the page by reference to the RBM version. But he does not do it - Oleg Gluschenko

1 answer 1

Your link lies inside the container that handles the onclick event. You, by calling e.preventDefault(); disable the standard event handling and thus prevent the event from spreading further into the container.

Remove this line and it will work.

 $(document).ready(function() { $('.dropdown').click(function(e) { $(this).find('.lang-menu').toggleClass('open'); $($(e.target).find('.down-caret').toggleClass('open-caret')); // e.preventDefault(); e.stopPropagation(); }); }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="dropdown lang"> <a class="langswitch" href="/">袪校小<span class="down-caret"></span></a> <ul class="lang-menu"> <li><a href="javascript:alert('Go!')">校袣袪</a></li> </ul> </div>

  • $ (document) .ready (function () {$ ('. dropdown'). click (function (e) {$ (this) .find ('. lang-menu'). toggleClass ('open'); $ ( $ (e.target) .find ('. down-caret'). toggleClass ('open-caret')); //e.preventDefault (); e.stopPropagation (); $ (document) .click (function ( ) {$ ('. lang-menu'). removeClass ('open'); $ ('. down-caret'). removeClass ('open-caret');});}); doesn't work anyway - Oleg Glushchenko