javascript在超时时隐藏下拉菜单

Question

感谢您花时间帮助我，我对 javascript 的了解不多， 但是我正在尝试为我的网站制作一个巨大的菜单，菜单会有很多子菜单，子菜单也会有子菜单，我知道这看起来很疯狂。 无论如何，幸运的是我为我的菜单找到了一个 js 代码，问题是它处于鼠标悬停模式（悬停）并且我的网站访问者不方便浏览菜单 bcs 它是如此巨大，我想知道你们中的任何一个可以稍微调整一下这段代码，让菜单在一定的超时后消失，比如说 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"
}