Question

我想在我的网页中切换两个功能，但我不知道如何......

代码：

<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函数之间切换......

Answer 1

这样的东西？

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

然后在onClick（）

中使用toggleNav（）

Answer 2

使用标记检查导航是否打开。

＆＃13;

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

＆＃13;

#mySidenav {
  width: 0;
  overflow:hidden;
}

＆＃13;

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

＆＃13;

JavaScript在2个函数之间切换

2 个答案: