问切换菜单故障
EN

Stack Overflow用户

提问于 2020-06-01 03:33:21

回答 1查看 42关注 0票数 2

我正在尝试创建一个切换菜单，我在我的HTML页面上放置了一个onclick事件侦听器。当我测试菜单时，出现了问题，控制台告诉我uncaught ReferenceError: myFnc is not defined at HTMLDivelement.onclick。

HTML代码

<body>

  <header>

      <img src="img/medical.png" alt="">

      <div class="container" onclick="myFnc(this)">

          <div class="line-1"></div>

          <div class="line-2"></div>

          <div class="line-3"></div>

      </div>

      <nav>

   <ul>

       <li><a href="pages/patent.php">Patients</a></li>

       <li><a href="pages/schedule.php">Schedule</a></li>

       <li><a href="pages/notes.php">Documents</a></li>

       <li><a href="pages/email.php">E-mail</a></li>

       <li><a href="pages/register.php">Register</a></li>

       <li><a href="pages/login.php">Login</a></li>

   </ul>

      </nav>

  </header> 

  <main></main>

  <script

  src="https://code.jquery.com/jquery-3.5.1.min.js"

  integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="

  crossorigin="anonymous"></script>

  <script src="js/script.js"></script>

</body>

Javascript

function myFnc(e) {

  var elem = document.getElementsByName("nav");

  style = window.getComputedStyle("elem");

  right = style.getPropertyValue("right");


  if (right == "0px") {

    elem.style.right = "-260px";

  } else {

    elem.style.right = "0px";

  }

}

javascript

回答 1

Stack Overflow用户

发布于 2020-06-01 03:48:02

更新了新代码:最好使用document.querySelector("nav")。documnet.getElementsByName()返回一个节点列表，而.querySelector返回一个元素，因此在这种情况下更容易使用。除此之外，在style = window.getComputedStyle("elem");中，您传入的是"elem"，但在引用变量时，您应该只传递elem (不带引号)。

这是一个有效的DEMO，请注意，您必须使用position: relative或position: absolute才能使right:-700px生效。

function myFnc(e) {

  var elem = document.querySelector("nav");

  style = window.getComputedStyle(elem);

  right = style.getPropertyValue("right");


  if (right == "0px") {

    elem.style.right = "-260px";

  } else {

    elem.style.right = "0px";

  }

}

.container {
  width: 50px;
  height: 50px;
  background: gray;
}

nav {
  position: relative;
}

<body>

  <header>

  <img src="img/medical.png" alt="">

  <div class="container" onclick="myFnc(this)"> CLICK ME

      <div class="line-1"></div>

      <div class="line-2"></div>

      <div class="line-3"></div>

  </div>

  <nav>

   <ul>

   <li><a href="pages/patent.php">Patients</a></li>

   <li><a href="pages/schedule.php">Schedule</a></li>

   <li><a href="pages/notes.php">Documents</a></li>

   <li><a href="pages/email.php">E-mail</a></li>

   <li><a href="pages/register.php">Register</a></li>

   <li><a href="pages/login.php">Login</a></li>

   </ul>

      </nav>

  </header> 

  <main></main>

  <script

  src="https://code.jquery.com/jquery-3.5.1.min.js"

  integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="

  crossorigin="anonymous"></script>

  <script src="js/script.js"></script>

</body>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/62121479

复制

相似问题

问切换菜单故障
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问切换菜单故障EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问切换菜单故障
EN