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

尝试将两个函数组合成一个回调。这只是为了让你开始。

＆＃13;

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");     
}

＆＃13;

#mySidenav{
  width:0px;
  overflow:hidden;
  border:1px solid #333;
}
#test{
  width:20px;
  height:20px;
}

＆＃13;

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

＆＃13;

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>

如何为按钮获取多个功能onclick？

3 个答案: