jQuery 菜单没有完全隐藏答案

【问题标题】：jQuery menu not hidden completelyjQuery 菜单没有完全隐藏
【发布时间】：2019-06-28 11:38:46
【问题描述】：

所以我有一个菜单，当您单击一个按钮时，它会打开一个充满链接的灯箱。灯箱本应仅在单击按钮时显示，但不幸的是一小部分（大约 183 像素，取决于屏幕尺寸）显示在页面的最底部。

$(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/

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

【问题讨论】：

标签： javascript jquery css menu

【解决方案1】：

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

【讨论】：

我实际上在我的父 CSS 表上有 box-sizing:border-box，这是一个导入。但即使我将它直接添加到 Lightbox 元素，问题仍然存在。为我解决的问题是从菜单元素中删除填充并使用填充创建#menu ul css 添加 - 这样填充只会影响列表而不是整个灯箱。更新小提琴：jsfiddle.net/0wdo42nr

【解决方案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>

关闭时只在灯箱中添加不显示

【讨论】：

这也有效！我没有选择它作为答案，因为填充实际上是导致问题的原因，这意味着另一个答案找到了问题的根源。感谢您的更新，我已将其包含在我的代码中 - 除了将填充添加到我的列表中以绝对确定在我单击按钮之前灯箱不会显示！谢谢！！！

【解决方案3】：

如果您在#menu .lightbox.close 样式规则上添加width:0;，这可能是简单的。

请看下面的片段：

$(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>

【讨论】：