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

【问题标题】：Change CSS rule for small screen with jQuery使用 jQuery 更改小屏幕的 CSS 规则
【发布时间】：2017-02-13 08:14:25
【问题描述】：

我正在为小屏幕制作培根菜单。我需要初始化菜单而不显示菜单链接，所以我用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;

【问题讨论】：

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

标签： jquery css sass themes

【解决方案1】：

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

.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');
  });

【讨论】：