CSS + Jquery Slide在调整大小时切换菜单问题

CSS + Jquery SlideToggle Menu Issue when Resizing

本文关键字：小时 菜单 问题 调整 Jquery Slide CSS      更新时间：2023-09-26

有人可以告诉我为什么当我调整窗口大小时我的链接消失了。

  1. 我从小（移动）窗口开始。单击菜单，关闭菜单。
  2. 将窗口大小调整为更大，链接全部消失。如果我刷新页面，它们会重新出现。

我无法弄清楚是 jquery 还是某处的 css 错误......

$(document).ready(function() {
  $('.openmenu').click(function() {
    $('#menu>ul').slideToggle(100);
    var $this = $(this);
    $this.toggleClass('openmenu');
    if ($this.hasClass('openmenu')) {
      $this.html('☰');
    } else {
      $this.html('✕');
    }
  });
});
#menu {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  color: #FFF;
  background-color: #000;
  cursor: pointer;
  height: 40px;
}
.omstyle {
  font-size: 1.5em;
  padding-left: 10px;
  line-height: 40px;
}
#menu ul {
  display: none;
  background-color: #333;
}
#menu ul li {
  padding: 10px;
  border-top-width: 1px;
  border-right-width: 0px;
  border-bottom-width: 0px;
  border-left-width: 0px;
  border-top-style: solid;
  border-right-style: solid;
  border-bottom-style: solid;
  border-left-style: solid;
  border-top-color: #666;
  border-right-color: #666;
  border-bottom-color: #666;
  border-left-color: #666;
  float: none;
}
#menu ul li a {
  color: #FFF;
  text-decoration: none;
}
@media screen and (min-width: 469px) {
  .omstyle {
    display: none;
  }
  #menu ul {
    display: block;
  }
  #menu ul li {
    float: left;
    display: block;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="menu">
  <div class="omstyle">
    <div class="openmenu">&#9776;</div>
  </div>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Diet</a></li>
    <li><a href="#">Skin</a></li>
    <li><a href="#">Digestion</a></li>
    <li><a href="#">Hair</a></li>
    <li><a href="#">For Men</a></li>
  </ul>
</div>

似乎 jquery 脚本没有应用规则，也考虑媒体查询。若要解决，请按如下所示修改媒体查询

@media screen and (min-width: 469px) {
  .omstyle {
    display: none;
  }
  #menu ul {
     display: block !important; /* ADD IMPORTANT*/
  }
  #menu ul li {
    float: left;
    display: block;
  }
}

这是因为您使用的slideToggle()方法在移动设备上关闭菜单时应用内联样式display: none。 当您调整浏览器大小时，此内联样式仍然存在，并且优先于您的 CSS。

修复它的一种方法是使用 ！important 标志

@media screen and (min-width: 469px) {
  .omstyle {
    display: none;
  }
  #menu ul {
    display: block !important;
  }
  #menu ul li {
    float: left;
    display: block;
  }
}
相关文章：