jquery - 使用 jquery 和 css 的移动菜单按钮和主菜单显示

Question

我有一个显示在 768 像素宽以下的移动菜单按钮，单击它会显示菜单，再次单击它会隐藏菜单。但是，一旦菜单被 jquery 隐藏，如果浏览器宽度增加(例如在桌面上)超过 768px，我该如何再次显示它。我必须使用 jQuery 来检查屏幕宽度并显示在 768 像素以上，还是 css 会这样做？

$(document).ready(function(){
    var h = $("#hamburger");
    h.addClass('fa fa-toggle-down');
    h.on('click', function(){
      if (h.hasClass('fa-toggle-down')) {
        h
        .removeClass('fa-toggle-down')
        .addClass('fa-toggle-up');
        $("#main-menu .module-menu").show();
      } else {
        h
        .removeClass('fa-toggle-up')
        .addClass('fa-toggle-down');
        $("#main-menu .module-menu").hide();
      }
    });
});

CSS:

#hamburger {
  font-size: 20px;
  border: 1px solid #eee;
  background: #f5f5f5;
  color: black;
  padding: 3px 3px;
  border-radius: 3px;
  width: 36px;
  height: 36px;
  text-align: center;
  line-height: 30px;
  margin: 14px 3px 3px 3px;
  float:left;
  display:none;
}   
@media (max-width:768px){
  #hamburger {display:block}
  #main-menu .module-menu {display:none}
}   

HTML:

<div id="main-menu">
    <div class="container">
      <div class="row">
      <div class="col-md-9"><module type="menu" /></div>
      <div class="col-md-3" id="header-search"><div id="hamburger"></div><module type="search" template="autocomplete" /></div>
      </div>
    </div>
</div>  

Answer 1

您可以使用类切换，而不是 show() 和 hide() 方法。所以在上课和不上课之间切换。然后你可以选择这个类在某些分辨率下隐藏。 这样您就可以避免使用 jQuery 检查屏幕宽度，并且可以依赖 css media 查询。这是一个例子: https://jsfiddle.net/43oays2c/