jQuery 菜单没有完全隐藏

Posted 2023-05-08

【中文标题】jQuery 菜单没有完全隐藏

【英文标题】：jQuery menu not hidden completely

【发布时间】：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/

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

【参考方案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>