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

Question

I'm new to coding and have no idea what I'm doing. But I managed to make something cool, but I can't repeat the coolness.

I'm working on my mobile design, and I made it where you click the burger, sidenav opens, and when you click to the right of the sidebar, the sidebar closes. Very cool.

The problem is that now it seems my onclick hamburger button is unclickable after it runs the event. Please help me. What am I doing wrong? How can I make my hamburger have unlimited functional click events? Thanks.

See my 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

The code works every time, but it's just doing what you tell it (the bane of all computer programming).

You're saying that if the user clicks in a place right of the 150px mark, it should move the sidebar to -150px (offscreen). Clicking again... moves the sidebar to -150px: in other words, it doesn't move it.

If what you're after is a toggle, you need to check to see where the sidebar is now, and if it's already offscreen, move it back onscreen.

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

This is pretty clunky coding style, though/ Better would be to use CSS, and define two styles: one for the sidebar in place and one without, and then check for which style is applied, and toggle the styles with addStyle and removeStyle.

Answer 2

Ciao, your problem is on handleMousePos . If mouseClickWidth >= 150 then you assign -150px to mySidebar style. Ok but you forgot the else statement to reassign 0px to your mySidebar .

So your code becomes:

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

Here your code modified.

Answer 3

Your handleMousePos(event) could be the problematic function here. You aren't removing the -150px after it gets added. So my best suggestion would be to modify it this way:

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

}

The better method would still be to use CSS for it and adding and removing a particular attribute like a class name which has its style already defined.

Or you may opt to use a hidden checkbox and have your hamburger menu be a label for it. That will make it easier on the CSS side as you can just add:checked and define your expanded sidebar properties