jQuery菜单没有完全隐藏

Question

所以我有一个菜单，当你点击一个按钮时，它会打开一个充满链接的灯箱。 Lightbox应该仅在单击按钮时显示，但不幸的是，在页面的最底部显示了一小部分（大约183px，具体取决于屏幕大小）。

$(function() {
  $('#trigger, .lightbox').click(function() {
    $('.lightbox').toggleClass('close');
  });
});

#menu {
  text-align: center;
}

#menu ul {
  list-style-type: none
}


/* Button */

button#trigger {
  margin: 20px;
}

button#trigger {
  background: transparent;
  border: 2px solid #ff0000;
  color: #000;
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 300;
  font-size: 18px;
  border-radius: 20px;
  padding: 10px 20px;
  text-decoration: none;
  text-transform: uppercase;
}

button#trigger:hover {
  cursor: pointer;
  opacity: 0.85;
}

#menu .lightbox {
  background: #000;
  color: #fff;
  height: 100%;
  opacity: 0.85;
  overflow: hidden;
  padding: 35% 0 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 3;
}

#menu .lightbox li.current_page_item a {
  border: 2px solid #ff0000;
  border-radius: 20px;
  color: #fff;
  display: inline-block;
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 300;
  padding: 10px 20px;
}

#menu .lightbox li.current_page_item a:hover {
  color: #fff;
  text-decoration: none;
}

#menu .lightbox a {
  color: #fff;
  display: inline-block;
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 18px;
  font-weight: 300;
  margin: 10px;
  text-decoration: none;
  text-transform: uppercase;
}

#menu .lightbox a:hover {
  color: #ddd;
  cursor: pointer;
  text-decoration: underline;
}

#menu .lightbox.close {
  height: 0;
  top: 100%;
}

#menu .ion-android-menu {
  font-size: 20px;
}

#menu .ion-android-close {
  font-size: 40px;
  position: absolute;
  right: 45px;
  top: 18px;
}

#menu .ion-android-close:hover {
  color: #ddd;
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="menu">
  <button id="trigger"><span class="ion-android-menu"><!-- --></span>
    </button>
  <div class="lightbox close">
    <span class="ion-android-close"><!-- --></span>
    <ul>
      <li class="current_page_item"><a href="">Link 1</a></li>
      <li><a href="">Link 2</a></li>
      <li><a href="">Link 3</a></li>
    </ul>
  </div>

有什么我想念的吗？不知道为什么会这样。这就是我所拥有的：https://jsfiddle.net/9dftx1vg/1/

我很确定这很简单，只是不能完全指责它！

Answer 1

将box-sizing: border-box添加到灯箱CSS规则中，否则它的35％顶部填充将添加到“隐藏”状态的* height：0 *。

Answer 2

$(function() {
  $('#trigger, .lightbox').click(function() {
    $('.lightbox').toggleClass('close');
  });
});

#menu {
  text-align: center;
}

#menu ul {
  list-style-type: none
}


/* Button */

button#trigger {
  margin: 20px;
}

button#trigger {
  background: transparent;
  border: 2px solid #ff0000;
  color: #000;
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 300;
  font-size: 18px;
  border-radius: 20px;
  padding: 10px 20px;
  text-decoration: none;
  text-transform: uppercase;
}

button#trigger:hover {
  cursor: pointer;
  opacity: 0.85;
}

#menu .lightbox {
  background: #000;
  color: #fff;
  height: 100%;
  opacity: 0.85;
  overflow: hidden;
  padding: 35% 0 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 3;
}

#menu .lightbox li.current_page_item a {
  border: 2px solid #ff0000;
  border-radius: 20px;
  color: #fff;
  display: inline-block;
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 300;
  padding: 10px 20px;
}

#menu .lightbox li.current_page_item a:hover {
  color: #fff;
  text-decoration: none;
}

#menu .lightbox a {
  color: #fff;
  display: inline-block;
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 18px;
  font-weight: 300;
  margin: 10px;
  text-decoration: none;
  text-transform: uppercase;
}

#menu .lightbox a:hover {
  color: #ddd;
  cursor: pointer;
  text-decoration: underline;
}

#menu .lightbox.close {
  display: none;
}

#menu .ion-android-menu {
  font-size: 20px;
}

#menu .ion-android-close {
  font-size: 40px;
  position: absolute;
  right: 45px;
  top: 18px;
}

#menu .ion-android-close:hover {
  color: #ddd;
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="menu">
  <button id="trigger"><span class="ion-android-menu"><!-- --></span>
    </button>
  <div class="lightbox close">
    <span class="ion-android-close"><!-- --></span>
    <ul>
      <li class="current_page_item"><a href="">Link 1</a></li>
      <li><a href="">Link 2</a></li>
      <li><a href="">Link 3</a></li>
    </ul>
  </div>

只需在关闭时将display none添加到灯箱

Answer 3

如果你在width:0;样式规则上添加#menu .lightbox.close，这可能很容易。

请参阅下面的代码段：

$(function() {
  $('#trigger, .lightbox').click(function() {
    $('.lightbox').toggleClass('close');
  });
});

#menu {
  text-align: center;
}

#menu ul {
  list-style-type: none
}


/* Button */

button#trigger {
  margin: 20px;
}

button#trigger {
  background: transparent;
  border: 2px solid #ff0000;
  color: #000;
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 300;
  font-size: 18px;
  border-radius: 20px;
  padding: 10px 20px;
  text-decoration: none;
  text-transform: uppercase;
}

button#trigger:hover {
  cursor: pointer;
  opacity: 0.85;
}

#menu .lightbox {
  background: #000;
  color: #fff;
  height: 100%;
  opacity: 0.85;
  overflow: hidden;
  padding: 35% 0 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 3;
}

#menu .lightbox li.current_page_item a {
  border: 2px solid #ff0000;
  border-radius: 20px;
  color: #fff;
  display: inline-block;
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 300;
  padding: 10px 20px;
}

#menu .lightbox li.current_page_item a:hover {
  color: #fff;
  text-decoration: none;
}

#menu .lightbox a {
  color: #fff;
  display: inline-block;
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 18px;
  font-weight: 300;
  margin: 10px;
  text-decoration: none;
  text-transform: uppercase;
}

#menu .lightbox a:hover {
  color: #ddd;
  cursor: pointer;
  text-decoration: underline;
}

#menu .lightbox.close {
  height: 0;
  width:0; /*ADD THIS ONE*/
  top: 100%;
}

#menu .ion-android-menu {
  font-size: 20px;
}

#menu .ion-android-close {
  font-size: 40px;
  position: absolute;
  right: 45px;
  top: 18px;
}

#menu .ion-android-close:hover {
  color: #ddd;
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="menu">
  <button id="trigger"><span class="ion-android-menu"><!-- --></span>
    </button>
  <div class="lightbox close">
    <span class="ion-android-close"><!-- --></span>
    <ul>
      <li class="current_page_item"><a href="">Link 1</a></li>
      <li><a href="">Link 2</a></li>
      <li><a href="">Link 3</a></li>
    </ul>
  </div>