超時時javascript隱藏下拉菜單

Question

謝謝你抽出時間來幫助我，我對javascript知之甚少，不過我正在嘗試為我的網站制作一個巨大的菜單，菜單會有很多子菜單，子菜單會有子菜單，我知道看起來很瘋狂 anywy，幸運的是我找到了我的菜單的js代碼，問題是它是onmouseover模式（懸停）並且我的網站訪問者不方便瀏覽菜單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"
}