Javascript 在两个功能之间切换_Javascript_Html

Javascript 在两个功能之间切换

javascript html

Javascript 在两个功能之间切换,javascript,html,Javascript,Html,我从html和javascript以及一般的编码开始。我想建立一个网站作为我学习的一部分。该网站将是关于婚礼电影和剪辑我想有一个侧菜单，菜单按钮（三条水平线）在左上角。当“单击”菜单按钮时，侧菜单将展开，菜单按钮将变为十字。当菜单按钮为十字时，它应具有隐藏侧菜单的功能 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-

我从html和javascript以及一般的编码开始。我想建立一个网站作为我学习的一部分。该网站将是关于婚礼电影和剪辑

我想有一个侧菜单，菜单按钮（三条水平线）在左上角。当“单击”菜单按钮时，侧菜单将展开，菜单按钮将变为十字。当菜单按钮为十字时，它应具有隐藏侧菜单的功能

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Wedding Page</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="style.css" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Dancing+Script:700">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
        <script src="main.js"></script>
</head>

<body>
    <div id="side-menu" class="side-nav">
        <a href="#" class="btn-close" onclick="closeSideMenu()">&times; </a>
        <ul class="fa-ul">
            <li><a href="#"><img id="icon" src="/mnt/120AA1F00AA1D0D1/Programming/Wedding-Web-Page/Icons/youtube32.png"></img>&emsp;Home</a></li>
            <li><a href="#">Book&nbsp;a&nbsp;date</a></li>
            <li><a href="#">Portfolio</a></li>
            <li><a href="#">Check</a></li>
        </ul>
    </div>
    <div>
        <span class="open-slide">
            <a href="#" onclick="toCross(this)">
                <div class="bar1"></div>
                <div class="bar2"></div>
                <div class="bar3"></div>
            </a>
        </span>
    </div>

    <p class="quote">One video, <br> thousands memories.</p>
</body>
</html>

我在这里发现了类似的问题：但由于某种原因，代码在执行第一个openSideMenu（）后停止，并且nav变量没有从false变为true

我被困在这里，憎恨我的生活，我将非常感谢你的帮助

据我所知，您尚未提供包含元素

#main

的HTML标记。似乎是

document.getElementById（'main'）

导致代码无法工作：

var-nav=false；
函数openSideMenu（）{
document.getElementById（'side-menu'）。style.width='250px'；
//document.getElementById（'main'）.style.marginLeft='250px'；
nav=真；
}
函数closeSideMenu（）{
document.getElementById（'side-menu'）。style.width='60px'；
//document.getElementById（'main'）.style.marginLeft='60px'；
nav=假；
}
函数toCross（x）{
控制台日志（nav）
x、 切换（“更改”）；
导航？关闭侧菜单（）：打开侧菜单（）；
}









一个视频，数千个记忆。

var nav = false;

function openSideMenu(){
    document.getElementById('side-menu').style.width = '250px';
    document.getElementById('main').style.marginLeft = '250px';
    nav = true;
}

function closeSideMenu(){
    document.getElementById('side-menu').style.width = '60px';
    document.getElementById('main').style.marginLeft = '60px';
    nav = false;
}

function toCross(x){
    x.classList.toggle("change");
    nav ? closeSideMenu() : openSideMenu();
}