javascript - 如何让按钮的 onclick 具有多个功能？

Question

我正在尝试创建一个按钮，单击该按钮可以执行两件事。首先，在汉堡菜单图标和时间图标 (X) 之间切换。第二个操作是将侧面导航元素的宽度从 0px 更改为 250px，如果再次单击则返回到 0px(与汉堡包菜单从 和 X 切换回汉堡包同步)。我已经能够让这些行动的各个部分发挥作用，但无法将它们全部整合在一起。以下是我目前拥有的功能:

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

有件事告诉我，我的 i 元素的 onclick 函数应该与我的按钮的事件监听器结合起来，但我无法让它正常工作。我还需要添加一种方法，以便在再次单击按钮时将侧边导航隐藏回 0px 宽度。

做这样的事情的正确方法是什么？

Answer 1

尝试将这两个函数合并到一个回调中。这只是为了帮助您入门。

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>