如何使導航欄僅在moble視圖中摺疊

Question

我在全屏視圖中導航欄摺疊時出現問題。我希望導航欄通過移動屏幕在漢堡包中摺疊，我寫了一個自定義指令。現在，當全屏幕，你點擊一個鏈接導航欄崩潰，並導致一個惱人的閃爍！任何想法或幫助將不勝感激！ 這裏是我的代碼：

JS：

.directive('collapseMenu', function() { 
    return { 
     link: function (scope, elem, attrs) { 
      $('.nav a').on('click', function(){ 
       $('.navbar-toggle').click() 
      }); 
     } 
    } 
}); 

HTML：

<!-- Navigation --> 
    <nav class="navbar navbar-default" role="navigation"> 
     <div class="container"> 
      <!-- Brand and toggle get grouped for better mobile display --> 
      <div collapse-menu class="navbar-header"> 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1"> 
        <span class="sr-only">Show Menu</span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </button> 
       <!-- navbar-brand is hidden on larger screens, but visible when the menu is collapsed --> 
       <a class="navbar-brand" href="#/home"></a><a <img src="images/phone.png" alt="press to call"></a> 
      </div> 
      <!-- Collect the nav links, forms, and other content for toggling --> 
      <div class="collapse navbar-collapse" id="navbar-collapse-1" > 
       <ul class="nav navbar-nav"> 
        <li><a class="home" href="#/home">Home</a></li> 
        <li><a class="about" href="#/about">About</a></li> 
        <li><a class="con" href="#/contact">Contact</a></li> 
        <li><a class="review" href="#/review">Reviews</a></li> 
        <li><a class="admin" href="#/admin">Admin</a></li> 
       </ul> 
      </div> 
     </div> 
    </nav> 

Answer 1

所以，如果你想消除了大屏幕上崩潰，你就必須添加屏幕寬度檢查您的鏈接點擊功能。而且，如果它小於特定大小，則會觸發.navbar-toggle單擊功能。否則，你什麼都不做。您可以使用$(window).width()檢查屏幕寬度。所以，你的指令代碼將變爲：

.directive('collapseMenu', function() { 
    return { 
     link: function (scope, elem, attrs) { 
      $('.nav a').on('click', function(){ 
       if ($(window).width() <= 1200) { 
        $('.navbar-toggle').click(); 
       } 
      }); 
     } 
    } 
});