Как я могу получить несколько функций для работы по нажатию кнопки? - PullRequest
Новая
       90

Как я могу получить несколько функций для работы по нажатию кнопки?

0 голосов
/ 11 июня 2018

Я пытаюсь создать кнопку, которая делает две вещи при нажатии.Во-первых, переключайтесь между значком меню гамбургера и значком времени (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>

Что-то подсказывает мне, что моя функция onclick для элемента i должна быть объединена с прослушивателем событий для моей кнопки, ноЯ не могу заставить его работать должным образом.Мне также нужно добавить способ скрытия sidenav обратно на ширину 0px, если кнопка будет нажата снова.

Как правильно сделать что-то подобное?

Спасибо взаранее за помощь!

Ответы [ 3 ]

0 голосов
/ 11 июня 2018

Вы можете попробовать следующее 

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>
0 голосов
/ 11 июня 2018

Я бы попробовал что-то вроде этого и позволил бы 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>
0 голосов
/ 11 июня 2018

Попробуйте объединить две функции в один обратный вызов.Это только начало. 

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