javascript - 我的元素甚至在用户点击它触发功能之前就不断显示(点击功能)

Question

我的 Javascript 下拉导航功能现在可以在移动设备上运行，这很棒，但是现在在我的“关于页面”和“索引页面”上，下拉文字(仅在用户单击后才显示)不断显示(见附件视频)。我不明白为什么这与其他页面一样，在单击之前下拉菜单不显示...

我附上了一段视频。有人可以查看我的 repo 并告诉我他们是否可以看到问题吗？视频:https://www.loom.com/share/0f829fc9d6664648802998f5cf4bcead

如有需要，请重新克隆:git@github.com:Angela-Inniss/CB.git

这是 Heroku 上的网站:https://cb-carpet-cleaning-services.herokuapp.com/ (进行中)。

我曾尝试在移动设备上不显示任何菜单，但这会隐藏整个菜单。

我的点击功能js

const dropDown = document.getElementById("nav-bar-grey"); 
const navBarOpen = document.getElementById("new-drop-down-js"); 
dropDown.onclick = showNav 
const closeButton = document.getElementById("closebtn");
closeButton.onclick = closeNav


function showNav (event) {
    navBarOpen.classList.toggle("nav-open");
  }

  function closeNav (event) {
    navBarOpen.classList.toggle("nav-close");
  }

关于页面 mobile.html.erb

<!--//mobile -->

<div class="background-about-mobile">
  <div class="white-bg-about">

    <h3>About.</h3>
    <div class="dash"> - </div>
    <h6>Who are we?</h6>

    <p class="about-text-mobile">We are a professional Carpet cleaning company that operates in the Leicestershire Region. Specialising in Carpet, Upholstery, hard floors, blinds and curtain cleaning fully insured, DBS Checked with 12 years plus experience.</p>
    <div class="dash"> - </div>
    <h6>What Services do we provide?</h6>

   <ul>
     <li>- Carpet cleaning</li>
     <li>- Rug cleaning</li>
     <li>- Stain removal</li>
     <li>- Amtico and Karndean maintenance</li>
     <li>- Hard Floor Maintence</li>
     <li>- Curtains and blinds cleaning.</li>
    </ul>


  </div>

我希望在移动设备上点击下拉菜单之前不会出现。

Answer 1

要么你需要更新你的javascript代码

设置 height:0px 只会降低你的 div 元素的高度，这就是为什么所有的子节点都是可见的你可以通过添加下面的 css 代码来实现它

 .nav-close a{
   display : none;
 }

或

 #new-drop-down-js{
  display : none;  // set the default value as none
}

.nav-open{
  display :block !important;
}

.nav-close{
 display : none ;
}