Javascript函数视觉错误答案

【问题标题】：Javascript function visual bugJavascript函数视觉错误
【发布时间】：2021-08-11 21:52:49
【问题描述】：

我有一个小错误，我创建了一个用于移动模式导航的弹出菜单，并且有两个按钮，一个调用移动导航栏，一个将其移除，我设置了关闭按钮以获取菜单向右-400px 离开访问者的视线，但页面底部有一个滚动条，可将您带到页面右侧，导航栏再次可见，有人可以帮我吗调用关闭函数后隐藏此导航栏。谢谢。

var navLinks = document.getElementById("navLinks");

function showMenu() {
  navLinks.style.right = "0";
}

function hideMenu() {
  navLinks.style.right = "-400px";
}

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Home | LuxxMob</title>
  <link rel="stylesheet" href="style.css" />
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Teko:wght@400;500;700&display=swap" rel="stylesheet" />
  <script src="https://kit.fontawesome.com/360332bae9.js" crossorigin="anonymous"></script>
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@200;400;700&display=swap" rel="stylesheet" />
</head>

<body>
  <section class="header">
    <div class="menu-header">
      <nav>
        <a href="index.html"><img src="images/HD_FILE (2).png" /></a>
        <div class="nav-links" id="navLinks">
          <i class="fas fa-times" onclick="hideMenu()"></i>
          <ul>
            <li>
              <a href="index.html">Home</a>
            </li>
            <li>
              <a href="news.html">News</a>
            </li>
            <li>
              <a href="players.html">Players</a>
            </li>
            <li>
              <a href="partners.html">Partners</a>
            </li>
            <li>
              <a href="about-us.html">About Us</a>
            </li>
          </ul>
        </div>
        <i class="fas fa-bars" onclick="showMenu()"></i>
      </nav>
    </div>
    <div class="main-texts">
      <div class="text-box">
        <h1>Welcome To <em>LuxxMob</em></h1>
        <p>
          An upcoming eSports team, recruiting talented gamers and creative content creators.
        </p>
        <a href="#" class="hero-btn">About Us</a>
      </div>
    </div>
  </section>

  <!--NEXT SECTION MEET THE OWNER-->

  <section class="meet-me">
    <h1>Meet The Players</h1>

    <div class="player-info">
      <p>
        Meet the competitive players, content creators and the owner of LuxxMob. A rapidly growing team of highly skilled members, providing some of the best content and gameplay available on social media currently.
      </p>
    </div>
  </section>

</body>

【问题讨论】：

为什么不display = "none"？
看不到，这可能是少数图片可能有用的情况之一
注意：如果位置是静态的（默认），css left、right、top、bottom 无效 - 也许你想将某些位置设置为绝对或相对或固定......除了静态之外的任何东西跨度>
@TrueChow：你也应该添加相关的 CSS。

标签： javascript css function

【解决方案1】：

使用display = none 和display = block 隐藏/显示您的div

var navLinks = document.getElementById("navLinks");

function showMenu() {
  navLinks.style.display= "block";
}

function hideMenu() {
  navLinks.style.display= "none";
}

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Home | LuxxMob</title>
  <link rel="stylesheet" href="style.css" />
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Teko:wght@400;500;700&display=swap" rel="stylesheet" />
  <script src="https://kit.fontawesome.com/360332bae9.js" crossorigin="anonymous"></script>
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@200;400;700&display=swap" rel="stylesheet" />
</head>

<body>
  <section class="header">
    <div class="menu-header">
      <nav>
        <a href="index.html"><img src="images/HD_FILE (2).png" /></a>
        <div class="nav-links" id="navLinks">
          <i class="fas fa-times" onclick="hideMenu()"></i>
          <ul>
            <li>
              <a href="index.html">Home</a>
            </li>
            <li>
              <a href="news.html">News</a>
            </li>
            <li>
              <a href="players.html">Players</a>
            </li>
            <li>
              <a href="partners.html">Partners</a>
            </li>
            <li>
              <a href="about-us.html">About Us</a>
            </li>
          </ul>
        </div>
        <i class="fas fa-bars" onclick="showMenu()"></i>
      </nav>
    </div>
    <div class="main-texts">
      <div class="text-box">
        <h1>Welcome To <em>LuxxMob</em></h1>
        <p>
          An upcoming eSports team, recruiting talented gamers and creative content creators.
        </p>
        <a href="#" class="hero-btn">About Us</a>
      </div>
    </div>
  </section>

  <!--NEXT SECTION MEET THE OWNER-->

  <section class="meet-me">
    <h1>Meet The Players</h1>

    <div class="player-info">
      <p>
        Meet the competitive players, content creators and the owner of LuxxMob. A rapidly growing team of highly skilled members, providing some of the best content and gameplay available on social media currently.
      </p>
    </div>
  </section>

</body>

【讨论】：

谢谢这工作，但它从右边出现的流畅动画消失了，你知道如何解决这个问题
您希望菜单接管/放置在内容之上还是将内容推到一边/向下
覆盖内容

【解决方案2】：

您应该在 body 或导航父级上设置 overflow-x: hidden;。

【讨论】：

【解决方案3】：

使用display 属性来隐藏/显示菜单栏，或者如果你真的想要左右滑动动画，你可以使用trasnform 和像这样的过渡属性：

var navLinks = document.getElementById("navLinks");

function showMenu() {
  console.log('Show');
  navLinks.style.transition = "all 0.9s";
  navLinks.style.transform = "translateX(0)";
}

function hideMenu() {
  console.log('Hide');
  navLinks.style.transition = "all 0.9s";
  navLinks.style.transform = "translateX(-400px)";
}

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Home | LuxxMob</title>
  <link rel="stylesheet" href="style.css" />
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Teko:wght@400;500;700&display=swap" rel="stylesheet" />
  <script src="https://kit.fontawesome.com/360332bae9.js" crossorigin="anonymous"></script>
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@200;400;700&display=swap" rel="stylesheet" />
</head>

<body>
  <section class="header">
    <div class="menu-header">
      <nav>
        <a href="index.html"><img src="images/HD_FILE (2).png" /></a>
        <div class="nav-links" id="navLinks">
          <button class="fas fa-times" onclick="hideMenu()"></button>
          <ul>
            <li>
              <a href="index.html">Home</a>
            </li>
            <li>
              <a href="news.html">News</a>
            </li>
            <li>
              <a href="players.html">Players</a>
            </li>
            <li>
              <a href="partners.html">Partners</a>
            </li>
            <li>
              <a href="about-us.html">About Us</a>
            </li>
          </ul>
        </div>
        <i class="fas fa-bars" onclick="showMenu()"></i>
      </nav>
    </div>
    <div class="main-texts">
      <div class="text-box">
        <h1>Welcome To <em>LuxxMob</em></h1>
        <p>
          An upcoming eSports team, recruiting talented gamers and creative content creators.
        </p>
        <a href="#" class="hero-btn">About Us</a>
      </div>
    </div>
  </section>

  <!--NEXT SECTION MEET THE OWNER-->

  <section class="meet-me">
    <h1>Meet The Players</h1>

    <div class="player-info">
      <p>
        Meet the competitive players, content creators and the owner of LuxxMob. A rapidly growing team of highly skilled members, providing some of the best content and gameplay available on social media currently.
      </p>
    </div>
  </section>

</body>

【讨论】：