用jQuery更改小屏幕的CSS規則

我正在爲小屏幕製作培根菜單。我需要初始化菜單而不顯示菜單鏈接，所以我用jQuery來隱藏它們。問題是在大屏幕菜單鏈接仍然隱藏，我不希望發生這種情況。用jQuery更改小屏幕的CSS規則

我用這個代碼，以避免在大屏幕菜單鏈接移除，但它不工作：

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;

來源

2017-02-12 Neone

不要使用JavaScript取決於風格改變屏幕大小，使用媒體查詢。在小屏幕上隱藏菜單，但在用戶單擊按鈕時強制顯示。您應該切換一個類，而不是直接從JavaScript中更改「display」屬性。 – LeBen

解決。我隱藏在小屏幕上的菜單鏈接，但他們展示大屏幕上：

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

來源

2017-02-12 15:18:24 Neone

用jQuery更改小屏幕的CSS規則

回答

相關問題