时间戳

首页 > 解决方案 > 如何在特定设备上隐藏更多过滤器按钮？

javascript - 如何在特定设备上隐藏更多过滤器按钮？

问题描述

我正在尝试构建一个过滤器。在 lg 设备中，我想使用更多过滤器按钮并将 hello world 3,4,5 隐藏在更多过滤器按钮内。然而，在 md 设备中，我不想要更多的过滤器按钮，而是想要加载完整的内容。

这可能吗？如果是这样，有人可以帮助我实现它吗？

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
    <script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js""></script>


    <div class="row mb-3">
      <div class="col-12">
        <p>Hello world</p>
        <p>Hello world 1</p>
        <p>Hello world 2</p>
        <button id="more-filters" class="btn btn-primary btn-block" type="button" data-toggle="collapse" data-target="#moreFilters" aria-expanded="false" aria-controls="moreFilters">More filters</button>
        
    <div class="collapse" id="moreFilters">
      <p>Hello world 3</p>
      <p>Hello world 4</p>
      <p>Hello world 5</p>
    </div>
        
       </div>
    </div>

标签： javascripthtmljquerycss

解决方案

下面的代码隐藏了超小型、小型和中型设备上的按钮，并在大型和超大型设备上显示它。

您必须使用 Javascript/Jquery 从中型设备上 ID 为 moreFilters 的元素中删除“折叠”类，并将其添加到大型设备上。

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
    <script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js""></script>

<script>
$(window).on('resize', function() {
if($(window).height() > 992) {
    $('#moreFilters').addClass('collapse');
}else{
    $('#moreFilters').removeClass('collapse');
}
})
</script>

    <div class="row mb-3">
      <div class="col-12">
        <p>Hello world</p>
        <p>Hello world 1</p>
        <p>Hello world 2</p>
        <button id="more-filters" class="btn btn-primary btn-block d-none d-sm-none d-md-none d-lg-block d-xl-block" type="button" data-toggle="collapse" data-target="#moreFilters" aria-expanded="false" aria-controls="moreFilters">More filters</button>
        
    <div class="collapse" id="moreFilters">
      <p>Hello world 3</p>
      <p>Hello world 4</p>
      <p>Hello world 5</p>
    </div>
        
       </div>
    </div>

推荐阅读