更改屏幕寬度時在導航欄上隱藏元素

Question

我目前使用Bootstrap v3.3.0，我希望當用戶更改屏幕寬度時，導航欄的最後一個元素（下拉列表之前的LINK）消失並添加到下拉列表。 我可以使用Bootstrap或任何JS庫嗎？導航欄的

實施例：http://getbootstrap.com/examples/navbar/

預先感謝。

Answer 1

您應該使用以下方法： 將它們添加兩次，以便在正常菜單和下拉菜單中添加它們。然後在CSS中顯示或在需要時隱藏它們。

@media (min-width: 768px) { 
    #item_link1 
    { 
     display:none; 
    } 
} 

@media (max-width: 768px) { 
    #item_link2 
    { 
     display:none; 
    } 
} 

Answer 2

使用jQuery功能

$(window).on("orientationchange load resize", function() { 
    var width = $(document).width(); 
    if(width<765){ 
      // $("#elementID").hide(); 
      // code for other elements hide stuff 
    } 
    else if(width>765){ 
      // for show iamges 
    } 
});