2016-05-11 2 views
0

Я хочу, чтобы переключаться между двумя функциями в моей веб-странице, но я не знаю, как ...JavaScript Переключение между 2 Функции

Код:

<html lang="en"> 
<head> 
    <meta charset="UTF-8"/> 
    <link rel="stylesheet" type="text/css" media="screen" href="/css/style.css"/> 
    <title>My Project</title> 

    <script> 
     function openNav() { 
      document.getElementById("mySidenav").style.width = "250px"; 
      document.getElementById("main").style.marginLeft = "250px"; 
      document.body.style.backgroundColor = "rgba(0,0,0,0.4)"; 
     } 

     function closeNav() { 
      document.getElementById("mySidenav").style.width = "0"; 
      document.getElementById("main").style.marginLeft = "0"; 
      document.body.style.backgroundColor = "white"; 
     } 
    </script> 
</head> 
<body> 
    <div id="main"> 
     <div class="head"> 
      <span class="openbtn" id="navbtn" onclick="openNav(); closeNav(); ">☰</span> 
      <p> Do Re Mi Fa So Laa</p> 
     </div> 
    </div> 
    <div id="mySidenav" class="sidenav"> 
     <a href="javascript:void(0)" class="openbtn" onclick="closeNav()">☰xx</a> 
     <a href="#">About</a> 
     <a href="#">Services</a> 
     <a href="#">Clients</a> 
     <a href="#">Contact</a> 
    </div> 
</body> 

Я хочу, чтобы переключаться между navopen и navclose ...

+0

это не JQuery – dippas

+1

Возможная Дубликат [Переключение между 2 Функции] (http://stackoverflow.com/questions/15603390/toggle-between-2-functions) – dippas

+0

не добавьте комментарии «Спасибо» в ответы - добавьте их как КОММЕНТАРИИ в ответ. Кроме того, научитесь принимать ответ. –

ответ

3

Что-то вроде этого?

var nav = false; 

    function openNav() { 
     document.getElementById("mySidenav").style.width = "250px"; 
     document.getElementById("main").style.marginLeft = "250px"; 
     document.body.style.backgroundColor = "rgba(0,0,0,0.4)"; 
     nav = true; 
        } 

    function closeNav() { 
     document.getElementById("mySidenav").style.width = "0"; 
     document.getElementById("main").style.marginLeft = "0"; 
     document.body.style.backgroundColor = "white"; 
     nav = false; 
        } 

    function toggleNav() { 
     nav ? closeNav() : openNav(); 
    } 

затем просто использовать toggleNav() в OnClick()

0

использовать флаг, чтобы проверить, если нав открыта или нет.

var isOpen = false; 
 

 
function openNav() { 
 
    document.getElementById("mySidenav").style.width = "250px"; 
 
    document.getElementById("main").style.marginLeft = "250px"; 
 
    document.body.style.backgroundColor = "rgba(0,0,0,0.4)"; 
 
    isOpen = true; 
 
} 
 

 
function closeNav() { 
 
    document.getElementById("mySidenav").style.width = "0"; 
 
    document.getElementById("main").style.marginLeft = "0"; 
 
    document.body.style.backgroundColor = "white"; 
 
    isOpen = false; 
 
} 
 

 
var btn = document.getElementById('navbtn'); 
 

 
btn.addEventListener('click', function() { 
 
    if (isOpen) { 
 
    closeNav(); 
 
    } else { 
 
    openNav(); 
 
    } 
 
}, false);
#mySidenav { 
 
    width: 0; 
 
    overflow:hidden; 
 
}
<div id="main"> 
 
    <div class="head"> 
 
    <span class="openbtn" id="navbtn">☰</span> 
 
    <p>Do Re Mi Fa So Laa</p> 
 
    </div> 
 
</div> 
 
<div id="mySidenav" class="sidenav"> 
 
    <a href="javascript:void(0)" class="openbtn" onclick="closeNav()">☰xx</a> 
 
    <a href="#">About</a> 
 
    <a href="#">Services</a> 
 
    <a href="#">Clients</a> 
 
    <a href="#">Contact</a> 
 
</div>

Смежные вопросы