时间戳

首页 > 解决方案 > 从顶部效果向下滑动不适用于 JavaScript

javascript - 从顶部效果向下滑动不适用于 JavaScript

问题描述

我期待我的一个按钮能够工作并弹出这些表单，但是每次我点击“更多”按钮时都没有任何反应。请帮忙！

<body>
    <!--Hero Image-->
    <div class="hero-image">
        <div class="hero-text">
            <h1 id="demo">Hi! I'm Jake</h1>
            <p>Webby web</p>

        <!-- The overlay -->
        <div id="myNav" class="overlay">

          <!-- Button to close the overlay navigation -->
          <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>

          <!-- Overlay content -->
          <div class="overlay-content">
            <a href="#">About</a>
            <a href="#">Services</a>
            <a href="#">Clients</a>
            <a href="#">Contact</a>
          </div>

        </div>
        <!--Use any element to open/show the overlay navigation menu-->
        <button class="button" onclick="myFunction()">More</button>
        </div>
    </div>

标签： javascripthtmlcssbootstrap-4

解决方案

您在 JavaScript 中设置了错误的 CSS 属性。应该是display，不是height。参见，例如：

document.getElementById("myNav").style.display = "none";

function displayNav() {
  document.getElementById("myNav").style.display = "block";
}

function closeNav() {
  document.getElementById("myNav").style.display = "none";
}
<!--Hero Image-->
<div class="hero-image">
  <div class="hero-text">
    <h1 id="demo">Hi! I'm Jake</h1>
    <p>Webby web</p>

    <!-- The overlay -->
    <div id="myNav" class="overlay">

      <!-- Button to close the overlay navigation -->
      <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>

      <!-- Overlay content -->
      <div class="overlay-content">
        <a href="#">About</a>
        <a href="#">Services</a>
        <a href="#">Clients</a>
        <a href="#">Contact</a>
      </div>

    </div>
    <!--Use any element to open/show the overlay navigation menu-->
    <button class="button" onclick="displayNav()">More</button>
  </div>
</div>

推荐阅读