如何在屏幕调整大小时显示并隐藏切换按钮

Question

当屏幕处于全尺寸时，我想显示我的用户列表（默认情况下并且没有切换），并在屏幕处于移动大小时提供切换，以便显示/隐藏列表。

我使用的代码如下：

<button type="button" class="btn btn-default" data-toggle="collapse" data-target="#demo">Users Online</button> 

<div id="demo" class="collapse"> 
    <div ng-repeat="user in chatCtrl.userList">{{user}}</div> 
</div> 

<script> 
$(document).ready(function(){ 
    $("#demo").on("hide.bs.collapse", function(){ 
    $(".btn").html(' Users Online'); 
    }); 
    $("#demo").on("show.bs.collapse", function(){ 
    $(".btn").html(' Users Online'); 
    }); 
}); 
</script> 

它给我的切换，即使在全尺寸屏幕。

所以只有一个问题：如何仅在屏幕崩溃时显示切换按钮？

任何建议和参考将不胜感激！ 谢谢。

Answer 1

给您的按钮ID和使用媒体查询

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

它将在上面的一切或768px您选择的屏幕尺寸被隐藏。

https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries