JS下拉菜单中的链接不会重定向

时间:2013-06-20 23:00:44

标签: javascript drop-down-menu

所以我整天都在这里,但不是一个好的JS编码器,它带领我来到这里。

当我点击导致“test.html”的下拉菜单中的链接时,没有任何反应。即使浏览器清楚地显示它是在悬停时处于活动状态的“test.html”链接,它也无法重定向。

这是JS代码。

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;

这是菜单的一部分。

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

如果有人要添加正确的代码段或者在代码中看到错误,我会非常高兴!

1 个答案:

答案 0 :(得分:2)

这是因为这行代码

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

进入此区块并返回false

这相当于调用e.preventDefault()e.stopPropagation(),因为链接不会跟随。{/ p>

另外

if(subMenu) //返回 true y 值。因为它是一个空的 jQuery对象

更好的检查是检查长度

if(subMenu.length)

<强>代码

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