简体   繁体   中英

Link in JS dropdown menu does not redirect

So I have had at this all day, but not being a good JS coder it lead me here.

When I click on the link in the dropdown menu leading to "test.html" nothing happens. It redirects nowhere, even if the browser clearly shows that it is the "test.html" link that is active on hovering.

Here is the JS code.

var timeout    = 500;
var closetimer = 0;
var ddmenuitem = 0;

function headermenu_open(event)
{
   headermenu_canceltimer();
   headermenu_close();
   var submenu = $(this).find('ul');
    if(submenu){
        ddmenuitem = submenu.css('visibility', 'visible');
        return false;
    }
    return true;
}

function headermenu_close()
{  if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}

function headermenu_timer()
{  closetimer = window.setTimeout(headermenu_close, timeout);}

function headermenu_canceltimer()
{  if(closetimer)
   {  window.clearTimeout(closetimer);
      closetimer = null;}}

$(document).ready(function()
{  $('#headermenu li').bind('click', headermenu_open);
   $('#headermenu > li').bind('mouseout',  headermenu_timer);
   $('#headermenu > li').bind('mouseover', headermenu_canceltimer);
});


document.onclick = headermenu_close;

And this is a part of the menu.

<ul id="headermenu">
    <li><a href="#">Høyttalere</a>
        <ul>
            <li><a href="pages/test.html">Test</a></li>
        </ul>
    </li>

If anyone has the right snippet to add or can see a mistake in the code I will be extremely happy!

It is because of this line of code

if(submenu){
   ddmenuitem = submenu.css('visibility', 'visible');
   return false;
}

It goes into this block and return false

Which is equivalent of calling e.preventDefault() and e.stopPropagation() because of which the link does not follow.

Also

if(subMenu) // returns truth y value.. As it is a empty jQuery Object

A better check would be is to check the length

if(subMenu.length)

Code

function headermenu_open(event){

   event.stopPropagation(); // need to stop the Propagation first
   headermenu_canceltimer();
   headermenu_close();
   var submenu = $(this).find('ul');
    if(submenu.length){
        ddmenuitem = submenu.css('visibility', 'visible');
        return false;
    }
    return true;
}

Working Fiddle

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM