Question

我知道我会踢自己，但是..

我有一个称为“打开按钮”的元素，它是页面左侧的一个小按钮。另一个称为main-side-nav的元素，包含指向页面其他部分的链接。

理论上，当用户将鼠标悬停在导航栏上时，导航栏的宽度会增加（并出现），而当用户从主导航栏滑出时会消失。目前发生的是，当我从按钮上退回时，它关闭了，而不是从主导航中退回了。

window.onload = function() { var mb = document.getElementById("open-button"); mb.addEventListener("mouseover", openSideNav); var mk = document.getElementById("main-side-nav"); mk.addEventListener("mouseout", closeSideNav); var navBar = document.getElementById("main-side-nav").style; function openSideNav() { console.log("open"); navBar.width = "100px"; } function closeSideNav() { navBar.width = "0px"; } }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="open-button"></div> <div id="main-side-nav" class="sidenav"> <a href="#section-home"> <img src="img/links/home.svg" class="image-links" id="image-links-home"> </a> <a href="#section-mystory"> <img src="img/links/mystory.svg" class="image-links" id="image-links-mystory"> </a> <a href="#section-links"> <img src="img/links/links.svg" class="image-links" id="image-links-links"> </a>

我希望这是有道理的。

Answer 1

您的JavaScript代码很好地解决了main-side-nav内部的元素的问题，即它们没有任何宽度值，这意味着如果您将以下内容添加到每个元素，则将其设置为默认值 auto 属性，您的代码将正确运行：

style="width: inherit;"

在下面进行检查：

  window.onload=function(){
  var mb = document.getElementById("open-button");
  mb.addEventListener("mouseover", openSideNav);

  var mk = document.getElementById("main-side-nav");
  mk.addEventListener("mouseout", closeSideNav);

  var navBar = document.getElementById("main-side-nav").style;

  function openSideNav() {
      console.log("open");
      navBar.width = "100px";
  }
  function closeSideNav() {
      console.log('close');
      navBar.width = "1px";
  }
}

<div id="open-button">test</div>
<div id="main-side-nav" class="sidenav" style="width: 0px;">
<a href="#section-home" style="width: inherit;">
<img src="https://www.macupdate.com/images/icons256/57051.png" class="image-links" id="image-links-home" style="width: inherit;">
</a>
<a href="#section-mystory" style="width: inherit;">
<img src="https://www.macupdate.com/images/icons256/57051.png" class="image-links" id="image-links-mystory" style="width: inherit;">
</a style="width: inherit;">
<a href="#section-links" style="width: inherit;">
<img src="https://www.macupdate.com/images/icons256/57051.png" class="image-links" id="image-links-links" style="width: inherit;">
</a>
</div>

尽管不是您正在构建的当前解决方案的粉丝，但只是想解释为什么您的代码无法按预期工作。

mouseover-在sideNav打开时更改元素

1 个答案: