摺疊導航欄保持打開後點擊

Question

我需要幫助關閉導航欄在移動版本的網站。當我選擇在導航欄的項目：它保持開放，它不會自動關閉，所以我需要在菜單上再次單擊關閉

https://jsfiddle.net/jrr3u08c/

這裏是我的HTML：

<div id="mobile-box"> 
     <a class="mobile" href="#">MENU</a> 
    </div> 
    <div class="menu-menu"> 
     <div class="sidebar1 col-sm-2 col-md-2 col-lg-1 col-xs-12" ng-if="authentication.isAuth" ng-cloak> 
      <ul id="nav" ng-cloak> 
       <li ng-if="IsUser()"><a ui-sref="dashboard">Dashboard</a></li> 
       <li ng-if="IsAdmin()"><a ui-sref="item">Item</a></li> 
      </ul> 
     </div> 
    </div> 

這是我的jQuery

$(document).ready(function() { 
    $("a.mobile").click(function() { 
     $(".sidebar1").slideToggle('fast'); 
    }); 
    window.onresize = function(event) { 
     if($(window).width() >880) { 
      $(".sidebar1").show(); 
     } 
     else { 
      $(".sidebar1").hide(); 
     } 
    }; 
}); 

編輯：新增角JS標籤質疑。

Answer 1

爲什麼你不使用引導導航欄？

您可以參考http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_navbar_collapse&stacked=h以供參考。

Answer 2

我想你需要這樣。試試這個JsFiddle

$(document).ready(function() { 
 
    $("a.mobile, .menu-item").click(function() { 
 
    $(".sidebar1").slideToggle('fast'); 
 
    }); 
 
    window.onresize = function(event) { 
 
    if ($(window).width() > 880) { 
 
     $(".sidebar1").show(); 
 
    } else { 
 
     $(".sidebar1").hide(); 
 
    } 
 
    }; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="mobile-box"> 
 
    <a class="mobile" href="#">MENU</a> 
 
</div> 
 
<div class="menu-menu"> 
 
    <div class="sidebar1 col-sm-2 col-md-2 col-lg-1 col-xs-12" ng- if="authentication.isAuth" ng-cloak> 
 
    <ul id="nav" ng-cloak> 
 
     <li ng-if="IsUser()"><a class="menu-item" ui-sref="dashboard">Dashboard</a> 
 
     </li> 
 
     <li ng-if="IsAdmin()"><a class="menu-item" ui-sref="item">Item</a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</div>

Answer 3

你甚至可以使用的hover()代替click()。它就像一個魅力。

$("a.mobile").hover(function() { 
    $(".sidebar1").slideToggle('fast'); 
});