Question

感谢您花时间帮助我，我对javascript知之甚少，但是我试图为我的网站制作一个巨大的菜单，菜单会有很多子菜单，子菜单会有子菜单，我知道它看起来很疯狂。 anywy，幸运的是我找到了我的菜单的js代码，问题是它是关于onmouseover模式（悬停）并且我的网站访问者不方便浏览菜单bcs它＆＃39 ; s太大了，我想知道你是否有人可以稍微调整一下这段代码并让菜单在一定的超时后消失，让我们说5秒钟。因为现在的问题是当访问者浏览菜单时，一旦鼠标指针稍微离开菜单，菜单就会被隐藏，我想在隐藏之前设置超时。先感谢您！欢呼声

这是js代码

var mcVM_options = {
  menuId: "menu-v",
  alignWithMainMenu: false
};

init_v_menu(mcVM_options);

function init_v_menu(a) {
  if (window.addEventListener) window.addEventListener("load", function() {
    start_v_menu(a)
  }, false);
  else window.attachEvent && window.attachEvent("onload", function() {
    start_v_menu(a)
  })
}

function start_v_menu(i) {
  var e = document.getElementById(i.menuId),
    j = e.offsetHeight,
    b = e.getElementsByTagName("ul"),
    g = /msie|MSIE 6/.test(navigator.userAgent);
  if (g)
    for (var h = e.getElementsByTagName("li"), a = 0, l = h.length; a < l; a++) {
      h[a].onmouseover = function() {
        this.className = "onhover"
      };
      h[a].onmouseout = function() {
        this.className = ""
      }
    }
  for (var k = function(a, b) {
      if (a.id == i.menuId) return b;
      else {
        b += a.offsetTop;
        return k(a.parentNode.parentNode, b)
      }
    }, a = 0; a < b.length; a++) {
    var c = b[a].parentNode;
    c.getElementsByTagName("a")[0].className += " arrow";
    b[a].style.left = c.offsetWidth + "px";
    b[a].style.top = c.offsetTop + "px";
    if (i.alignWithMainMenu) {
      var d = k(c.parentNode, 0);
      if (b[a].offsetTop + b[a].offsetHeight + d > j) {
        var f;
        if (b[a].offsetHeight > j) f = -d;
        else f = j - b[a].offsetHeight - d;
        b[a].style.top = f + "px"
      }
    }
    c.onmouseover = function() {
      if (g) this.className = "onhover";
      var a = this.getElementsByTagName("ul")[0];
      if (a) {
        a.style.visibility = "visible";
        a.style.display = "block"
      }
    };
    c.onmouseout = function() {
      if (g) this.className = "";
      this.getElementsByTagName("ul")[0].style.visibility = "hidden";
      this.getElementsByTagName("ul")[0].style.display = "none"
    }
  }
  for (var a = b.length - 1; a > -1; a--) b[a].style.display = "none"
}

Answer 1

你的代码对我来说不是很容易理解（变量没有意义），但我想你必须改变这部分代码

c.onmouseout = function() {
    if (g) this.className = "";
    this.getElementsByTagName("ul")[0].style.visibility = "hidden";
    this.getElementsByTagName("ul")[0].style.display = "none"
}

类似

c.onmouseout = function() {
    setTimeout(function(){
        var g= g = /msie|MSIE 6/.test(navigator.userAgent);
        if (g) this.className = "";
        this.getElementsByTagName("ul")[0].style.visibility = "hidden";
        this.getElementsByTagName("ul")[0].style.display = "none" ;
    }.bind(this), 5000);
}

Answer 2

尝试将setTimeOut方法添加到您的代码中。您可以在以下链接中找到更多详细信息： http://www.w3schools.com/jsref/met_win_settimeout.asp

请在下面找到编辑过的代码：

init_v_menu(mcVM_options);

function init_v_menu(a) {
if (window.addEventListener) window.addEventListener("load", function() {
    start_v_menu(a)
}, false);
else window.attachEvent && window.attachEvent("onload", function() {
    start_v_menu(a)
})
}

function start_v_menu(i) {
var e = document.getElementById(i.menuId),
    j = e.offsetHeight,
    b = e.getElementsByTagName("ul"),
    g = /msie|MSIE 6/.test(navigator.userAgent);
if (g)
    for (var h = e.getElementsByTagName("li"), a = 0, l = h.length; aj) {
        var f;
        if (b[a].offsetHeight > j) f = -d;
        else f = j - b[a].offsetHeight - d;
        b[a].style.top = f + "px"
    }
}
c.onmouseover = function() {
if (g) this.className = "onhover";
var a = this.getElementsByTagName("ul")[0];
if (a) {
    a.style.visibility = "visible";
    a.style.display = "block"
}
};
c.onmouseout = function() {
setTimeout(function() {
    if (g) this.className = "";
    this.getElementsByTagName("ul")[0].style.visibility = "hidden";
    this.getElementsByTagName("ul")[0].style.display = "none"
}, 3000);
}
}
 for (var a = b.length - 1; a > -1; a--) b[a].style.display = "none"
}

超时时javascript隐藏下拉菜单

2 个答案: