javascript - 为什么我的 <a> 元素出现在其父 div 切换之前

Question

基本上，我的导航下拉菜单中的元素在使用 JQuery.toggleClass() 切换其父 div 之前显示。

这是一个简单的问题，但无论出于何种原因，我的头都撞到了墙上。

HTML:

<div id="navCont">
     <div class="burger">
     <div class="bar1"></div>
    <div class="bar2"></div>
    <div class="bar3"></div>
</div>
<div class="nav">
  <a href="#home">home</a>
  <a href="myWork.html">work</a>
  <a href="#contact">cont</a>
</div>

参见 JS fiddle :https://jsfiddle.net/ywkxyjx3/1/

我在 CSS/Jquery 中尝试了一些明显的解决方案，例如将可见性设置为隐藏或不显示并切换它。所有这些都失败了。

如果有人有更好的方法来创建汉堡包下拉菜单，我将不胜感激。

谢谢

Answer 1

因为你的容器包含一个溢出元素:

.nav {
  position: absolute;
  display: block;
  height: 0px;
  overflow: hidden; // Change this.
  float: right;
  top: 55px;
  opacity: 1;
  text-align: center;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}

从技术上讲，您的解决方案可行，但如果我们使用 Chrome 的 DevTools，我们会看到元素从 0 高度父容器中溢出。将 overflow: hidden 添加到父级以隐藏它们。

工作片段:

$(".burger").click(function() {
  $(".nav").toggleClass("show", 900);
  $(".burger").toggleClass("change");
});

#navCont {
  width: 47px;
  height: auto;
  float: right;
}


/*Dropdown Nav*/

.nav {
  position: absolute;
  display: block;
  overflow: hidden;
  height: 0px;
  float: right;
  top: 55px;
  opacity: 99;
  text-align: center;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}

.nav a {
  color: black;
  text-decoration: none;
}

.show {
  height: auto;
  max-height: 999px;
}

.burger {
  /* box around hamburger. Has onclick function*/
  display: inline-block;
  position: relative;
  float: right;
  padding: 5px;
  cursor: pointer;
}


/*Individual lines of burger*/

.bar1,
.bar2,
.bar3 {
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background-color: #95449a;
  margin: 6px 0;
  /*seperate the lines*/
  transition: 1s;
  /*time taken for any animation to take place */
}


/*in html classlist.toggle(change)*/

.change .bar1 {
  -webkit-transform: translateY(10px) rotate(45deg);
  transform: translateY(10px) rotate(45deg);
}

.change .bar2 {
  opacity: 0;
  -webkit-transform: translateX(10px);
  transform: translateX(10px);
}

.change .bar3 {
  -webkit-transform: translateY(-10px) rotate(-45deg);
  transform: translateY(-10px) rotate(-45deg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<div id="navCont">
  <div class="burger">
    <div class="bar1"></div>
    <div class="bar2"></div>
    <div class="bar3"></div>
  </div>
  <div class="nav">
    <a href="#home">home</a>
    <a href="myWork.html">work</a>
    <a href="#contact">cont</a>
  </div>
</div>