使用jQuery更改小屏幕的CSS规则

我正在为小屏幕制作培根菜单。我需要在不显示菜单链接的情况下初始化菜单，因此我使用

jQuery

隐藏它们。问题是，在大屏幕上，菜单链接仍然是隐藏的，我不希望这种情况发生

我使用此代码避免在大屏幕上删除菜单链接，但它不起作用：

scripts.js

      $(window).resize(function(){     
        if ($(window).width() > 720 ){
          $('ul.menu').css('display', 'none');
        } else {
          $('ul.menu').css('display', 'inline-block');
          // $(this).toggleClass('is-active');
        }
      });

      //$('ul.menu').css('display', 'none');
      $('#menuButton').click(function(){
        $(this).toggleClass('is-active');
        if ($(this).hasClass('is-active')) {
          $('ul.menu').css('display', 'block');
        }
        else {
          $('ul.menu').css('display', 'none');
        }
        });

SASS

    .menu
      li
       display: block;
       text-align: center;
       background-color: #fff;
       @include media($medium-screen-up) 
         list-style-type: none
         display: inline-block
         float: right;
         margin: 0 10px 0 10px
         @include position(relative, -50px null null null)
         background-color: initial;

决心。 我在小屏幕上隐藏菜单链接，但在大屏幕上显示它们：

.menu
  li.menu-item
    display: none;
    text-align: center;
    background-color: #fff;
  .is-active
    display: block !important
@include media($medium-screen-up) 
  li.menu-item
    list-style-type: none
    display: inline-block !important
    float: right;
    margin: 0 10px 0 10px
    @include position(relative, -50px null null null)

然后使用jQuery，我可以切换菜单链接的类：

// Burger menu for small screen
  $('#menuButton').click(function(){
    $(this).toggleClass('is-active');
    $('li.menu-item').toggleClass('is-active');
    $('ul.menu').toggleClass('is-active');
  });

---

不要使用JavaScript根据屏幕大小更改样式，请使用媒体查询。在小屏幕上隐藏菜单，但在用户单击按钮时强制使其可见。您应该切换类，而不是直接从JavaScript更改“display”属性。