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

码:

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

最佳答案

像这样吗

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

10-04 16:13