Question

当页面加载时，我需要单击按钮两次以触发onclick()功能。在这样做之后，一切都按预期工作。

由于我是这个网络开发领域的新手，我非常感谢详细解释。

提前谢谢你。

var hamburger = function() {
  var menu = document.getElementById('menuBarSlide');
  if (menu.style.right == "-300px") {
    menu.style.right = "0px";
  } else {
    menu.style.right = "-300px";
  }
}

<div class="navMenuItem hamburger" onclick="hamburger()">
  <span class="ham-icon"></span>
  <span class="ham-icon"></span>
  <span class="ham-icon"></span>
</div>

Answer 1

我认为menuBarSlide是div的ID，如果是的话，这应该适合你。

我添加了一些样式以突出显示div，并添加console.log()以确保代码执行。

编辑：也许问题是您希望该元素在right属性中具有值，但它是不同的，因此记录该样式可能会有所帮助。

编辑2 ：问题出现在初始值（这就是为什么您的第一次点击无效，因此使用此变体menu.style.right = menu.style.right || "-100px";解决了问题。该行如果值为空，则代码分配-100px 。此外，程序在条件赋值之前和之后记录值。

<!DOCTYPE html>
<html lang="">
<head>
  <meta charset="utf-8">
    <title>menuBarSlide</title>
    <style> 
        #menuBarSlide {  /*To highligth your div*/
            position: absolute;
            background-color: grey;
            color: red;
        }
    </style>
</head>

<body>
    <div class="navMenuItem hamburger" onclick="hamburger()">
       <span class="ham-icon">Item1</span>
       <span class="ham-icon">Item2</span>
       <span class="ham-icon">Item3</span>
    </div>

    <div id="menuBarSlide">
      <h1>menuBarSlide</h1>
    </div>

    <script>
        var hamburger = function() {
            var menu = document.getElementById('menuBarSlide');

            console.log("before assing: " + menu.style.right); // To check the current style of the element

            menu.style.right = menu.style.right || "-100px"; // Assign -100px if is null, otherwise keep the same value

            console.log("after assing: " + menu.style.right); // To check the style after the asigment

            if (menu.style.right == "-100px") {
              menu.style.right = "30px";
            }    
            else {
              menu.style.right = "-100px";
            }
        }
    </script>

<body>
<html>

Onclick事件在第一次单击时不起作用

1 个答案: