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

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;
      }
    }

它将隐藏在 768 像素或您选择的屏幕尺寸以上的所有内容上。

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