javascript - 无法让我的菜单按钮在单击时显示菜单（使用内联 JS）

Question

这是html

<script>
    var = navLinks = Document.getElementById(navLinks);

    function showMenu(){
        navLinks.style.right = "0";
    }
    function hideMenu(){
        navLinks.style.right = "-200px";
    }

</script>

这是CSS

    .nav-links{
        position: absolute;
        background: red;
        height: 100vh;
        width: 200px;
        top: 0;
        right: -200px;
        text-align: left;
        z-index: 2;
        transition: 1s;

我不确定为什么 onclick 什么都没有发生，据我所知，我正确地完成了 JS。

进一步在 html 我有这个

<i class="fa fa-bars" onclick="showMenu()"></i>

和

<div class="nav-links" id="navLinks">
                <i class="fa fa-times" onclick="hideMenu()"></i>

标签： javascripthtmlcssmenuonclick

Answer 1

您应该从此更改您的代码

<script>
    var = navLinks = Document.getElementById(navLinks);

    function showMenu(){
        navLinks.style.right = "0";
    }
    function hideMenu(){
        navLinks.style.right = "-200px";
    }

</script>

至，

<script>
    var navLinks = document.getElementById("navLinks");

    function showMenu(){
        navLinks.style.right = "0";
    }
    function hideMenu(){
        navLinks.style.right = "-200px";
    }

</script>