调整大小时的 CSS + Jquery SlideToggle 菜单问题

Question

谁能告诉我为什么我调整窗口大小时链接消失了。

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>

Answer 1

考虑到媒体查询，jquery 脚本似乎没有应用规则。要解决，修改媒体查询如下

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

Answer 2

这是因为您使用的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;
  }
}