Question

我开始完全使用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>

连接的javascript文件位于：

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

我在这里发现了类似的问题：JavaScript Toggle between 2 Functions但由于某种原因，代码在执行第一个openSideMenu（）之后停止，并且nav变量不会从false更改为true。

我被困在这里讨厌我的生活，我将非常感谢你的帮助！

Answer 1

据我所知，您还没有提供包含元素#main的HTML标记。似乎document.getElementById('main')导致代码不起作用：

＆＃13;

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) {
  console.log(nav)
  x.classList.toggle("change");
  nav ? closeSideMenu() : openSideMenu();
}

＆＃13;

<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">&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)">x
                <div class="bar1"></div>
                <div class="bar2"></div>
                <div class="bar3"></div>
            </a>
        </span>
</div>

<p class="quote">One video, <br> thousands memories.</p>

＆＃13;

切换2个功能

1 个答案: