Кнопка мобильного меню и отображение главного меню с jquery и css

Question

У меня есть кнопка мобильного меню шириной менее 768 пикселей, и при нажатии она отображает меню, а при повторном нажатии - скрывает меню. Однако, как только jquery скрывает меню, как я могу показать его снова, если ширина браузера (например, на рабочем столе) превышает 768 пикселей. Должен ли я использовать 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/