事件发生后，为什么我的onclick汉堡包按钮会停止工作？

编程问答 2022-08-15

问题描述

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

我正在研究我的移动设计，并在您单击汉堡的位置完成了创建，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);

解决方法

代码每次都有效，但是它只是在按照您所说的做（所有计算机编程的祸根）。

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

如果要执行的操作是切换，则需要检查以查看侧边栏现在的位置，如果侧边栏已经在屏幕外，则将其移回屏幕。

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

尽管这是一种笨拙的编码样式，但更好的方法是使用CSS，并定义两种样式：一种用于就位的侧边栏，另一种不用于边栏，然后检查应用了哪种样式，并使用addStyle和removeStyle。

,

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

因此您的代码变为：

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

Here您的代码已修改。

,

您的handleMousePos(event)在这里可能是有问题的功能。添加后，您不会删除-150px。因此，我最好的建议是按以下方式进行修改：

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

}

更好的方法仍然是使用CSS并添加和删除特定属性，例如已经定义了样式的类名。

或者，您可以选择使用隐藏的复选框，并将汉堡菜单作为标签。这样可以简化CSS方面，因为您只需添加：checked并定义扩展的侧边栏属性

buttonbuttonbuttonevent-listenerjavascriptonclickonclickonclicksidebarsidebar