jQueryのモバイルナビゲーションバー

Question

jQueryを使用したモバイルナビゲーションバーで作業しています。私はjQueryがモバイルナビゲーションバーで完全に機能するというわずかな問題がありますが、画面をデスクトップにリサイズすると、デスクトップナビゲーションが消えます。

jQuery(document).ready(function() { 
    jQuery(".navtoggle").click(function() { 
    jQuery(".nav-menu").slideToggle(); 
    }); 
}); 

モバイルBreackpoints SASS

@include breakpoint(xxxs) { 

    header { 
    nav { 

     ul { 
     background: #6c49b8; 
     li { 
      display: block; 
      border-bottom: 1px solid rgba(0,0,0,.1); 
      border-left: none; 
      border-right: none; 
      padding: 15px; 
      &:last-child { 
      border-left: none; 
      border-right: none; 
      } 
     } 

     } 

     .sub-menu { 
     position: relative; 
     top: 0; 
     padding: 0px; 
     background-color: #563a92; 
     z-index: 1; 
     } 
    } 
    } 


    .second-navbar { 
     #open { 
     margin: 20px 0px; 
     display: block; 
     } 
    } 
    } 


@include breakpoint(xxs) { 

    header { 
    nav { 

     ul { 
     background: #6c49b8; 
     li { 
      display: block; 
      border-bottom: 1px solid rgba(0,0,0,.1); 
      border-left: none; 
      border-right: none; 
      padding: 15px; 
      &:last-child { 
      border-left: none; 
      border-right: none; 
      } 
     } 

     } 

     .sub-menu { 
     position: relative; 
     top: 0; 
     padding: 0px; 
     background-color: #563a92; 
     z-index: 1; 
     } 
    } 
    } 


    .second-navbar { 
     #open { 
     height: auto; 
     margin: 20px 0px; 
     display: block; 
     } 
    } 
    } 


@include breakpoint(xs) { 

    header { 
    nav { 

     ul { 
     background: #6c49b8; 
     li { 
      display: block; 
      border-bottom: 1px solid rgba(0,0,0,.1); 
      border-left: none; 
      border-right: none; 
      padding: 15px; 
      &:last-child { 
      border-left: none; 
      border-right: none; 
      } 
     } 

     } 

     .sub-menu { 
     position: relative; 
     top: 0; 
     padding: 0px; 
     background-color: #563a92; 
     z-index: 1; 
     } 
    } 
    } 


    .second-navbar { 
     #open { 
     height: auto; 
     margin: 20px 0px; 
     display: block; 
     } 
    } 
    } 


@include breakpoint(sm) { 

    header { 
    nav { 

     ul { 
     background: #6c49b8; 
     li { 
      display: block; 
      border-bottom: 1px solid rgba(0,0,0,.1); 
      border-left: none; 
      border-right: none; 
      padding: 15px; 
      &:last-child { 
      border-left: none; 
      border-right: none; 
      } 
     } 

     } 

     .sub-menu { 
     position: relative; 
     top: 0; 
     padding: 0px; 
     background-color: #563a92; 
     z-index: 1; 
     } 
    } 
    } 


    .second-navbar { 
     #open { 
     height: auto; 
     margin: 20px 0px; 
     display: block; 
     } 
    } 
    } 


@include breakpoint(table) { 

    header { 
    nav { 

     ul { 
     background: #6c49b8; 
     li { 
      display: block; 
      border-bottom: 1px solid rgba(0,0,0,.1); 
      border-left: none; 
      border-right: none; 
      padding: 15px; 
      &:last-child { 
      border-left: none; 
      border-right: none; 
      } 
     } 

     } 

     .sub-menu { 
     position: relative; 
     top: 0; 
     padding: 0px; 
     background-color: #563a92; 
     z-index: 1; 
     } 
    } 
    } 


    .second-navbar { 
     #open { 
     height: auto; 
     margin: 20px 0px; 
     display: block; 
     } 
    } 
    } 



@include breakpoint(md) { 

    header { 
    nav { 

     ul { 
     background: #6c49b8; 
     li { 
      display: block; 
      border-bottom: 1px solid rgba(0,0,0,.1); 
      border-left: none; 
      border-right: none; 
      padding: 15px; 
      &:last-child { 
      border-left: none; 
      border-right: none; 
      } 
     } 

     } 

     .sub-menu { 
     position: relative; 
     top: 0; 
     padding: 0px; 
     background-color: #563a92; 
     z-index: 1; 
     } 
    } 
    } 


    .second-navbar { 
     #open { 
     height: auto; 
     margin: 20px 0px; 
     display: block; 
     } 
    } 
    } 

Answer 1

私はあなたのHTMLを見ることなく、これを答えることをしようとしますが、それはデスクトップ上にあるとして、あなたのナビゲーションは、モバイルで同じ.nav-menu要素であるならば、私は思いますあなたのナビゲーションをhiddenからvisibleにjQuery関数で切り替えるので、これが起こっていると思います。したがって、ナビゲーションが非表示になるとサイズを変更すると、デスクトップ上にもナビゲーションが表示されなくなります。

.nav-menuディスプレイが明示的にブロックするように設定されている@media (min-width: 768px)などのメディアクエリを使用すると、デスクトップのナビゲーションが常に表示されるようにすることができます。 （潜在的に関係なく、ユーザが自分のモバイルトグルボタンで何をしたか、display:block !important;

にそのように設定されていないが、ブラウザは画面の幅が768pxの上にある任意の時間は、ナビゲーションを表示することを知っている