javascript 在超时时隐藏下拉菜单

Question

感谢您花时间帮助我，我对 javascript 没有太多了解，然而我正在尝试为我的网站制作一个巨大的菜单，该菜单将有许多子菜单，而子菜单将有子菜单，我知道这看起来很疯狂。无论如何，幸运的是我找到了菜单的js代码，问题是它处于onmouseover模式(悬停)，并且我的网站访问者不方便浏览菜单，因为它太大了，我想知道你们中是否有人可以稍微调整一下这段代码，让菜单在一定的超时(比如说 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

尝试将 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"
}