为什么我的 onclick 汉堡包按钮在活动结束后停止工作？

Question

我是编码新手，不知道自己在做什么。 但是我设法做出了一些很酷的东西，但我不能重复这种酷。

我正在做我的移动设计，我在你点击汉堡的地方做了它，sidenav 打开，当你点击侧边栏的右边时，侧边栏关闭。 很酷。

问题是现在我的 onclick 汉堡包按钮在运行事件后似乎无法点击。 请帮我。 我究竟做错了什么？ 我怎样才能让我的汉堡有无限的功能点击事件？ 谢谢。

查看我的 JS FIDDLE： http://jsfiddle.net/r214g0oc/1/

HTML：

<header id="navbar">

<div >
<img src="img/Logo.jpg" alt="logo" class="hmainlogo"/>
  <button class="openbtn" onclick="openNav()">☰</button>  

</div>

<div id="main"> 
    <div id="mySidebar" class="sidebar">
        <img src="img/Logo.jpg" alt="logo" class="hsblogo"/>
        <ul>

        <li><a href="index.php">Home</a></li>
        <li><a href="about.php">About</a></li>
        <li><a href="services.php">Services</a></li>
        <li><a href="rates.php">Rates</a></li>
        <li><a href="reviews.php">Reviews</a></li>
        </ul>
        <a href="freeconsult.php" id="hfreeconsult">Free Consult</a>
    </div>

</div>

</header>

JAVASCRIPT：

function openNav() {
    document.getElementById("mySidebar").style.width = "150px";
    document.getElementById("main").style.marginLeft = "150px";
}


function handleMousePos(event) {
    var mouseClickWidth = event.clientX;
    if (mouseClickWidth >= 150) {
        document.getElementById("mySidebar").style.left = '-150px';
    }
}

document.addEventListener("click", handleMousePos);

Answer 1

该代码每次都有效，但它只是按照您的指示执行（所有计算机编程的祸根）。

你是说如果用户点击 150px 标记右边的地方，它应该将侧边栏移动到 -150px（屏幕外）。 再次单击...将侧边栏移动到 -150px：换句话说，它不会移动它。

如果你想要的是一个切换，你需要检查侧边栏现在在哪里，如果它已经在屏幕外，把它移回屏幕上。

   if (document.getElementById("mySidebar").style.left == '-150px')  document.getElementById("mySidebar").style.left =0;

这是非常笨拙的编码风格，不过/更好的方法是使用 CSS，并定义两个 styles：一个用于侧边栏，一个没有，然后检查应用了哪种样式，并使用 addStyle 和 removeStyle 切换 styles。

Answer 2

再见，你的问题出在handleMousePos上。 如果mouseClickWidth >= 150 ，则将-150px分配给mySidebar样式。 好的，但是您忘记了将0px重新分配给您的mySidebar的else语句。

所以你的代码变成：

function handleMousePos(event) {
    var mouseClickWidth = event.clientX;
    if (mouseClickWidth >= 150) {
        document.getElementById("mySidebar").style.left = '-150px';
    }
    else {
        document.getElementById("mySidebar").style.left = '0px';
    }
}

此处您的代码已修改。

Answer 3

您的handleMousePos(event)可能是这里有问题的 function。 添加后，您不会删除 -150px。 所以我最好的建议是这样修改它：

function openNav() {
document.getElementById("mySidebar").style.left = '0px';
document.getElementById("mySidebar").style.width = "150px";
document.getElementById("main").style.marginLeft = "150px";

}

更好的方法仍然是为它使用 CSS 并添加和删除一个特定的属性，如 class 名称，其样式已经定义。

或者您可以选择使用隐藏的复选框并将您的汉堡菜单设为 label。 这将使 CSS 端更容易，因为您只需添加：选中并定义扩展的侧边栏属性