如何让多个函数在单击按钮时起作用？

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 函数应该与我的按钮的事件侦听器结合使用，但我无法让它正常工作。如果再次单击按钮，我还需要添加一种方法将 sidenav 隐藏回 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>

Answer 2

您可以尝试关注

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>

Answer 3

我会尝试这样的事情，让 CSS 为您处理更多事情。

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>

如何让多个函数在单击按钮时起作用？

How Do I Get Multiple Functions to Work onclick for a Button?

javascript

onclick

addeventlistener

htmlbutton