javascript - 为右侧菜单添加 javascript 时，左侧的子菜单不会出现。但为什么？

标签 javascript html css

我这里有这个菜单。它工作正常。我想要一个在页面的左侧，一个在右侧。当我只有左侧菜单时，它工作得很好。但是，一旦我为右侧菜单添加 javascript 代码，某些东西似乎会影响左侧菜单的 js，并且子菜单不再出现。

有人可以帮帮我吗？

非常感谢

/*navmenu-left*/

var mcVM_options = {
  menuId: "menu-v",
  alignWithMainMenu: false
};
/* www.menucool.com/vertical/vertical-menu.*/
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"
}








/*navmenu-right*/

var mcVM_options = {
  menuId: "menu-vr",
  alignWithMainMenu: false
};
/* www.menucool.com/vertical/vertical-menu.*/
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.right = 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"
}
/*nav-menu right*/

#menu-v,
#menu-v ul {
  width: 200px;
  position: relative;
  font-size: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  display: block;
  z-index: 9;
  margin-top: 135px;
  float: left;
}


/* Top level menu links style
---------------------------------------*/

#menu-v li {
  background: url(bg.gif) repeat-x 0 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}

#menu-v li a {
  font: normal 17px Gitan Latin;
  display: block;
  color: black;
  text-decoration: none;
  line-height: 39px;
  padding-left: 26px;
  border: none;
}

#menu-v ul li a {
  line-height: 39px;
}

#menu-v li a.arrow:hover {
  background-image: url(../assets/ringsenberg-pfeil-rechts.svg);
  background-repeat: no-repeat;
  background-position: 170px 12px;
}


/*Sub level menu items
---------------------------------------*/

#menu-v li ul {
  position: absolute;
  width: 200px;
  /*Sub Menu Items width */
  visibility: hidden;
  margin: 0px;
}

#menu-v a.arrow {
  background-image: url(../assets/ringsenberg-pfeil-rechts.svg);
  background-repeat: no-repeat;
  background-position: 170px 12px;
}

#menu-v li:hover,
#menu-v li.onhover {
  transition: all .5s;
  background: rgba(198, 156, 109, .2);
  border-bottom: solid;
  border-width: 1px;
  border-color: #C69C6D;
}

#menu-v ul li {
  background: none;
}

#menu-v ul li:hover,
#menu-v ul li.onhover {
  background: #FFF;
  background: rgba(198, 156, 109, .2);
  border-right: solid;
  border-width: 1px;
  border-color: #C69C6D;
}

#menu-v li a.top {
  color: white;
  transition: all .5s;
}

#menu-v li a.top:hover {
  color: black;
  background: rgba(226, 205, 182, 1)
}


/*nav-menu right*/

#menu-vr,
#menu-vr ul {
  width: 200px;
  position: relative;
  font-size: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  display: block;
  z-index: 9;
  margin-top: 135px;
  float: right;
  text-align: right;
}


/* Top level menu links style
---------------------------------------*/

#menu-vr li {
  background: url(bg.gif) repeat-x 0 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}

#menu-vr li a {
  font: normal 17px Gitan Latin;
  display: block;
  color: black;
  text-decoration: none;
  line-height: 39px;
  padding-right: 26px;
  border: none;
}

#menu-vr ul li a {
  line-height: 39px;
}

#menu-vr li a.arrow:hover {
  background-image: url(../assets/ringsenberg-menue-pfeil-links.svg);
  background-repeat: no-repeat;
  background-position: 30px 12px;
}


/*Sub level menu items
---------------------------------------*/

#menu-vr li ul {
  position: absolute;
  width: 200px;
  /*Sub Menu Items width */
  visibility: hidden;
  margin: 0px;
}

#menu-vr a.arrow {
  background-image: url(../assets/ringsenberg-menue-pfeil-links.svg);
  background-repeat: no-repeat;
  background-position: 30px 12px;
}

#menu-vr li:hover,
#menu-vr li.onhover {
  transition: all .5s;
  background: rgba(198, 156, 109, .2);
  border-bottom: solid;
  border-width: 1px;
  border-color: #C69C6D;
}

#menu-vr ul li {
  background: none;
}

#menu-vr ul li:hover,
#menu-vr ul li.onhover {
  background: #FFF;
  background: rgba(198, 156, 109, .2);
  border-left: solid;
  border-width: 1px;
  border-color: #C69C6D;
}

#menu-vr li a.top {
  color: white;
  transition: all .5s;
}

#menu-vr li a.top:hover {
  color: black;
  background: rgba(226, 205, 182, 1)
}
<ul id="menu-v">
  <li><a href="#" class="top">Home</a></li>
  <li><a href="#">Instrumente</a>
    <ul class="sub">
      <li><a href="vertical-menu#1">Vertical Menu</a></li>
      <li><a href="vertical-menu#2">Vertical Menus</a></li>
    </ul>
  </li>
  <li><a href="#">Restauration</a>
    <ul class="sub">
      <li><a href="#">Sub Item 3.1</a></li>
      <li><a href="#">Sub Item 3.2</a></li>
      <li><a href="#">Sub Item 3.3</a></li>
      <li><a href="#">Sub Item 3.4</a></li>
      <li><a href="#">Sub Item 3.5</a></li>
    </ul>
  </li>
  <li><a href="#">Grafikdesign</a></li>
  <li><a href="#">CNC-Fertigung</a>
    <ul class="sub">
      <li><a href="#">Sub Item 5.1</a></li>
      <li><a href="#">Sub Item 5.2</a></li>
      <li><a href="#">Sub Item 5.3</a></li>
    </ul>
  </li>
</ul>


<ul id="menu-vr">
  <li><a href="#" class="top">Home</a></li>
  <li><a href="#">Instrumente</a>
    <ul class="sub">
      <li><a href="vertical-menu#1">Vertical Menu</a></li>
      <li><a href="vertical-menu#2">Vertical Menus</a></li>
    </ul>
  </li>
  <li><a href="#">Restauration</a>
    <ul class="sub">
      <li><a href="#">Sub Item 3.1</a></li>
      <li><a href="#">Sub Item 3.2</a></li>
      <li><a href="#">Sub Item 3.3</a></li>
      <li><a href="#">Sub Item 3.4</a></li>
      <li><a href="#">Sub Item 3.5</a></li>
    </ul>
  </li>
  <li><a href="#">Grafikdesign</a></li>
  <li><a href="#">CNC-Fertigung</a>
    <ul class="sub">
      <li><a href="#">Sub Item 5.1</a></li>
      <li><a href="#">Sub Item 5.2</a></li>
      <li><a href="#">Sub Item 5.3</a></li>
    </ul>
  </li>
</ul>

最佳答案

它出现了，但是子导航被赋予了正确的 200px 样式，所以它没有显示在它应该出现的位置。如果你有它给子导航一个样式 left:200px 相反，它看起来像它应该的......你确实有，但它没有生效，因为你用相同的名称命名你的函数，所以两个菜单都调用了最后一个 start_v_menu 函数。我更改了名称，所以现在可以使用了。

/*navmenu-left*/

var mcVM_options = {
  menuId: "menu-v",
  alignWithMainMenu: false
};
/* www.menucool.com/vertical/vertical-menu.*/
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"
}








/*navmenu-right*/

var mcVM_options = {
  menuId: "menu-vr",
  alignWithMainMenu: false
};
/* www.menucool.com/vertical/vertical-menu.*/
init_vr_menu(mcVM_options);

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

function start_vr_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.right = 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"
}
/*nav-menu right*/

#menu-v,
#menu-v ul {
  width: 200px;
  position: relative;
  font-size: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  display: block;
  z-index: 9;
  margin-top: 135px;
  float: left;
}


/* Top level menu links style
---------------------------------------*/

#menu-v li {
  background: url(bg.gif) repeat-x 0 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}

#menu-v li a {
  font: normal 17px Gitan Latin;
  display: block;
  color: black;
  text-decoration: none;
  line-height: 39px;
  padding-left: 26px;
  border: none;
}

#menu-v ul li a {
  line-height: 39px;
}

#menu-v li a.arrow:hover {
  background-image: url(../assets/ringsenberg-pfeil-rechts.svg);
  background-repeat: no-repeat;
  background-position: 170px 12px;
}


/*Sub level menu items
---------------------------------------*/

#menu-v li ul {
  position: absolute;
  width: 200px;
  /*Sub Menu Items width */
  visibility: hidden;
  margin: 0px;
}

#menu-v a.arrow {
  background-image: url(../assets/ringsenberg-pfeil-rechts.svg);
  background-repeat: no-repeat;
  background-position: 170px 12px;
}

#menu-v li:hover,
#menu-v li.onhover {
  transition: all .5s;
  background: rgba(198, 156, 109, .2);
  border-bottom: solid;
  border-width: 1px;
  border-color: #C69C6D;
}

#menu-v ul li {
  background: none;
}

#menu-v ul li:hover,
#menu-v ul li.onhover {
  background: #FFF;
  background: rgba(198, 156, 109, .2);
  border-right: solid;
  border-width: 1px;
  border-color: #C69C6D;
}

#menu-v li a.top {
  color: white;
  transition: all .5s;
}

#menu-v li a.top:hover {
  color: black;
  background: rgba(226, 205, 182, 1)
}


/*nav-menu right*/

#menu-vr,
#menu-vr ul {
  width: 200px;
  position: relative;
  font-size: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  display: block;
  z-index: 9;
  margin-top: 135px;
  float: right;
  text-align: right;
}


/* Top level menu links style
---------------------------------------*/

#menu-vr li {
  background: url(bg.gif) repeat-x 0 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}

#menu-vr li a {
  font: normal 17px Gitan Latin;
  display: block;
  color: black;
  text-decoration: none;
  line-height: 39px;
  padding-right: 26px;
  border: none;
}

#menu-vr ul li a {
  line-height: 39px;
}

#menu-vr li a.arrow:hover {
  background-image: url(../assets/ringsenberg-menue-pfeil-links.svg);
  background-repeat: no-repeat;
  background-position: 30px 12px;
}


/*Sub level menu items
---------------------------------------*/

#menu-vr li ul {
  position: absolute;
  width: 200px;
  /*Sub Menu Items width */
  visibility: hidden;
  margin: 0px;
}

#menu-vr a.arrow {
  background-image: url(../assets/ringsenberg-menue-pfeil-links.svg);
  background-repeat: no-repeat;
  background-position: 30px 12px;
}

#menu-vr li:hover,
#menu-vr li.onhover {
  transition: all .5s;
  background: rgba(198, 156, 109, .2);
  border-bottom: solid;
  border-width: 1px;
  border-color: #C69C6D;
}

#menu-vr ul li {
  background: none;
}

#menu-vr ul li:hover,
#menu-vr ul li.onhover {
  background: #FFF;
  background: rgba(198, 156, 109, .2);
  border-left: solid;
  border-width: 1px;
  border-color: #C69C6D;
}

#menu-vr li a.top {
  color: white;
  transition: all .5s;
}

#menu-vr li a.top:hover {
  color: black;
  background: rgba(226, 205, 182, 1)
}
<ul id="menu-v">
  <li><a href="#" class="top">Home</a></li>
  <li><a href="#">Instrumente</a>
    <ul class="sub">
      <li><a href="vertical-menu#1">Vertical Menu</a></li>
      <li><a href="vertical-menu#2">Vertical Menus</a></li>
    </ul>
  </li>
  <li><a href="#">Restauration</a>
    <ul class="sub">
      <li><a href="#">Sub Item 3.1</a></li>
      <li><a href="#">Sub Item 3.2</a></li>
      <li><a href="#">Sub Item 3.3</a></li>
      <li><a href="#">Sub Item 3.4</a></li>
      <li><a href="#">Sub Item 3.5</a></li>
    </ul>
  </li>
  <li><a href="#">Grafikdesign</a></li>
  <li><a href="#">CNC-Fertigung</a>
    <ul class="sub">
      <li><a href="#">Sub Item 5.1</a></li>
      <li><a href="#">Sub Item 5.2</a></li>
      <li><a href="#">Sub Item 5.3</a></li>
    </ul>
  </li>
</ul>


<ul id="menu-vr">
  <li><a href="#" class="top">Home</a></li>
  <li><a href="#">Instrumente</a>
    <ul class="sub">
      <li><a href="vertical-menu#1">Vertical Menu</a></li>
      <li><a href="vertical-menu#2">Vertical Menus</a></li>
    </ul>
  </li>
  <li><a href="#">Restauration</a>
    <ul class="sub">
      <li><a href="#">Sub Item 3.1</a></li>
      <li><a href="#">Sub Item 3.2</a></li>
      <li><a href="#">Sub Item 3.3</a></li>
      <li><a href="#">Sub Item 3.4</a></li>
      <li><a href="#">Sub Item 3.5</a></li>
    </ul>
  </li>
  <li><a href="#">Grafikdesign</a></li>
  <li><a href="#">CNC-Fertigung</a>
    <ul class="sub">
      <li><a href="#">Sub Item 5.1</a></li>
      <li><a href="#">Sub Item 5.2</a></li>
      <li><a href="#">Sub Item 5.3</a></li>
    </ul>
  </li>
</ul>

关于javascript - 为右侧菜单添加 javascript 时，左侧的子菜单不会出现。但为什么？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45635978/

上一篇：css - polymer 铁媒体查询不适用于 dom 重复元素

下一篇：jquery - 使 DIV 和 UL 像 SELECT 元素一样

相关文章：

html - CSS 将样式应用于单个元素而不是类

javascript - 为什么我们不在 javascript 中使用函数参数的数据类型？

javascript - React - 处理输入的变化以及通过数组迭代呈现的状态

JavaScript - 单击未定义数量的元素以切换多个元素

html - Mailchimp Outlook 条件 CSS 未生效

html - Bootstrap - 如何在新行中设置内容

php - 从开关盒掉下来？

javascript - Nuxt.js:如何将全局 CSS 从样式标签移动到 css 文件

javascript - Casper.js 获取网页并显示

javascript - 完整的日历样式未在网站中显示

©2024 IT工具网  联系我们