Question

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

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

我无法弄清楚它是不是jquery，或css错误...

＆＃13;

$(document).ready(function() {
  $('.openmenu').click(function() {
    $('#menu>ul').slideToggle(100);
    var $this = $(this);
    $this.toggleClass('openmenu');
    if ($this.hasClass('openmenu')) {
      $this.html('&#9776;');
    } else {
      $this.html('&#10005;');
    }
  });
});

＆＃13;

#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;
  }
}

＆＃13;

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

＆＃13;

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;
  }
}

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

2 个答案: