JavaScript 在 2 个函数之间切换

标签 javascript

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

代码:

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

关于JavaScript 在 2 个函数之间切换,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37164993/

相关文章:

javascript - 单击表头时对表中的行进行排序

Javascript/jQuery 监视 CSS 更改

javascript - jquery ('#div_id' ).show() 在 Firefox 中不工作

javascript - 将 option 标签的值添加到 div

javascript - 函数参数未定义

javascript - 通过node js将大blob插入到vitess中

javascript - 单击显示属性淡化多个图像

javascript - 使用 FileSaver.js 保存 blob

javascript - 将javascript代码改为jquery代码,怎么样?

javascript - HTML 5 canvas toDataURL 更改了原始数据