0

I'm trying to create a button that does two things when clicked. The first, toggle between a hamburger menu icon and a times icon (X). The second action is to change a side navigation element's width from 0px to 250px and then back to 0px if clicked again (syncing up with the hamburger menu switching from and X and back to a hamburger). I've been able to get various parts of these actions to work, but haven't been able to bring them all together. Here are the functions I currently have:

<script>

     document.getElementById("test").addEventListener("click", myFunctionTwo);

    function myFunctionTwo() {
        document.getElementById("mySidenav").style.width = "250px";
    }    

    function myFunction(x) {
      x.classList.toggle("fa-times");       
      x.classList.toggle("fa-bars");     
    }

    </script>

HTML:

<button id="test">
<i onclick="myFunction(this)" class="fa fa-bars"></i>    
</button>        

<div id="mySidenav" class="sidenav">    
<a href="#">NFL</a>
<a href="#">NBA</a>
<a href="#">MLB</a>   
</div>

Something tells me that my onclick function for the i element should be combined with the event listener for my button but I cannot get it to work properly. I also need to add a way to hide the sidenav back to a 0px width if the button is clicked again.

What is the proper way to go about doing something like this?

Thanks in advance for the help!

4

3 回答 3

1

Try combining the two functions into one callback. This is just to get you started.

document.getElementById("test").addEventListener("click", myFunction);

function myFunctionTwo(open) {
    if(open){
      document.getElementById("mySidenav").style.width = "250px";
    }else{
      document.getElementById("mySidenav").style.width = "0px";
    }
}    

function myFunction(event) {//have myFunction queue the work for everything that needs to be done.
  if(! event.currentTarget.opened){
    event.currentTarget.opened = true;
    myFunctionTwo(true);
  }else{
    event.currentTarget.opened = false;
    myFunctionTwo(false);
  }

  var x = event.currentTarget.children[0];
  x.classList.toggle("fa-times");       
  x.classList.toggle("fa-bars");     
}
#mySidenav{
  width:0px;
  overflow:hidden;
  border:1px solid #333;
}
#test{
  width:20px;
  height:20px;
}
<button id="test">
<i class="fa fa-bars"></i>    
</button>        

<div id="mySidenav" class="sidenav">    
<a href="#">NFL</a>
<a href="#">NBA</a>
<a href="#">MLB</a>   
</div>

于 2018-06-11T15:59:27.790 回答
0

You can try following

function myFunction(x) {
  x.classList.toggle("fa-times");
  x.classList.toggle("fa-bars");
  document.getElementById("mySidenav").classList.toggle("width_250px");
}
.sidenav {
  width: 0px;
}

.width_250px {
  width: 250px;
}
<i onclick="myFunction(this)" class="fa fa-bars">Toggle</i>

<div id="mySidenav" class="sidenav">
  <a href="#">NFL</a>
  <a href="#">NBA</a>
  <a href="#">MLB</a>
</div>

于 2018-06-11T16:00:31.380 回答
0

I would try something like this and let CSS handle more for you.

document.getElementById("test").addEventListener("click", toggleNav);

function toggleNav()
{
  var body = document.getElementsByTagName("BODY")[0];
  body.classList.toggle('nav-open');
}    
body div#mySidenav {
  display:none;
  width:150px;
  background:yellow;
}
body button#test .fa-times {
	display:none;
}
body.nav-open button#test .fa-times {
	display:inline;
}
body.nav-open button#test .fa-bars {
	display:none;
}
body.nav-open div#mySidenav {
	display:block;
}
<html>
<body>

<button id="test">
<i class="fa fa-bars">-</i> 
<i class="fa fa-times">x</i>
</button>        

<div id="mySidenav" class="sidenav">    
<a href="#">NFL</a>
<a href="#">NBA</a>
<a href="#">MLB</a>   
</div>

</body>
</html>

<body>

<button id="test">
<i class="fa fa-bars"></i> 
<i class="fa fa-times"></i>
</button>        

<div id="mySidenav" class="sidenav">    
<a href="#">NFL</a>
<a href="#">NBA</a>
<a href="#">MLB</a>   
</div>

</body>

于 2018-06-11T16:08:31.543 回答