jQueryで小画面用のCSSルールを変更

Question

ベーコンメニュー小さな画面用。私はメニューリンクを表示せずにメニューを初期化する必要があるので、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; 

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