时间戳

首页 > 解决方案 > 在较小的屏幕上，滑出选项卡应该粘在 Div 的左侧，无论如何

javascript - 在较小的屏幕上，滑出选项卡应该粘在 Div 的左侧，无论如何

问题描述

我正在构建这个 SlideOut 过滤器 div。Div 默认位于较大屏幕的右侧，但当屏幕尺寸缩小时，Sidebar会隐藏并显示 .SlideOutTab。

在 768px 和 992px 之间，.slideOutTab它们#facetsSlide的行为并不像他们应该做的那样。

两个 div 都浮动。

我已经将 CSS 放在 768px 和 992px 之间的空间的媒体查询中，但这并没有改变正在发生的事情。

这是小提琴的链接

有人可以帮我弄这个吗？

$(document).ready(function(){
  $('.slideOutTab').on("click", function(){
    $("#facetsSlide").toggleClass('show');
    $('.slideOutTab').toggleClass('showSlideOut');

  } );
});
/* Display slideOut */
.content {
  background: gray;
  min-height: 100vh;
  order: 2; }

#facetsSlide {
  width: 300px;
  background: #fff;
  position: absolute;
  right: 0px; }

#facetsSlide.show {
  transform: inherit;
  display: block;
  background: #fff; }

.showSlideOut {
  right: 300px !important; }

.custom-control.ls-checkbox:hover {
  cursor: pointer;
  background-color: #f9f9f9; }

.custom-control.ls-checkbox .material-control-input {
  display: none; }
  .custom-control.ls-checkbox .material-control-input:checked ~ .material-control-indicator {
    border-color: #c2002d;
    transform: rotateZ(45deg) translate(1px, -5px);
    width: 10px;
    border-top: 0px solid #fff;
    border-left: 0px solid #fff; }

.custom-control.ls-checkbox .material-control-indicator {
  display: inline-block;
  position: absolute;
  top: 4px;
  left: 0;
  width: 16px;
  height: 16px;
  border: 2px solid #bab9b9;
  transition: .3s; }

/* Tab */
.slideOutTab {
  cursor: pointer;
  z-index: 1000;
  /*margin-top: -300px;*/
  margin-top: 0px;
  position: absolute;
  /*left: -40px;*/
  right: 0px;
  height: 200px;
  width: 40px;
  -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
  background: #fff;
  border-radius: 1px 0px 0px 1px;
  border: 1px solid #bab9b9; }

.slideOutTab div {
  text-align: center;
  position: relative;
  right: 70px;
  top: 90px;
  color: #c2002d;
  width: 180px;
  -webkit-transform: rotate(270deg);
  -moz-transform: rotate(270deg);
  -o-transform: rotate(270deg);
  writing-mode: lr-tb; }

@media (max-width: 1199.98px) {
  #facetsSlide {
    display: none;
    transform: translateX(-100%); } }

@media (min-width: 992px) {
  .slideOutTab {
    display: none; } }
<script src="https://cdnjs.cloudflare.com/ajax/libs/webui-popover/2.1.15/jquery.webui-popover.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container d-flex w-100" id="main">
  <div class="col content ">
 Search results
 </div>
  <!-- // SlideOut -->
  <div class="col-md-3 " id="facetsSlide">

    <article class="card-group-item">
      <header class="card-header">
        <h6 class="title">FilterBlock1:</h6>
      </header>
      <div class="filter-content">
        <div class="card-body">
            <label class="custom-control ls-checkbox" for="Check1">
              <span class="float-right badge badge-light round">15054</span>

              <input type="checkbox" class="material-control-input" id="Check1">
                <span class="material-control-indicator"></span>
                <span class="material-control-description">Filter1</span>
            </label>

              <label class="custom-control ls-checkbox" for="Check2">
                <span class="float-right badge badge-light round">2165</span>

                <input type="checkbox" class="material-control-input" id="Check2">
                  <span class="material-control-indicator"></span>
                  <span class="material-control-description">Filter2</span>
              </label>

                <label class="custom-control ls-checkbox" for="Check3">
                  <span class="float-right badge badge-light round">2364</span>

                  <input type="checkbox" class="material-control-input" id="Check3">
                    <span class="material-control-indicator"></span>
                    <span class="material-control-description">Filter3</span>
                </label>

                  <label class="custom-control ls-checkbox" for="Check4">
                    <span class="float-right badge badge-light round">475</span>

                    <input type="checkbox" class="material-control-input" id="Check4">
                      <span class="material-control-indicator"></span>
                      <span class="material-control-description">Filter4</span>
                  </label>


                    <label class="custom-control ls-checkbox" for="Check5">
                      <span class="float-right badge badge-light round">215</span>

                      <input type="checkbox" class="material-control-input" id="Check5">
                        <span class="material-control-indicator"></span>
                        <span class="material-control-description">Filter5</span>
                    </label>

        </div> <!-- card-body.// -->
      </div>

        <header class="card-header">
          <h6 class="title">FilterBlock2</h6>
        </header>
        <div class="filter-content">
          <div class="card-body">
        <label class="custom-control ls-checkbox">
          <span class="float-right badge badge-light round">29</span>
          <input type="checkbox" class="material-control-input">
            <span class="material-control-indicator"></span>
            <span class="material-control-description">1819-1828</span>
        </label>

        <label class="custom-control ls-checkbox">
          <span class="float-right badge badge-light round">77</span>
          <input type="checkbox" class="material-control-input">
          <span class="material-control-indicator"></span>
          <span class="material-control-description">1829-1838</span>
        </label>

        <label class="custom-control ls-checkbox">
          <span class="float-right badge badge-light round">260</span>
          <input type="checkbox" class="material-control-input">
          <span class="material-control-indicator"></span>
          <span class="material-control-description">1839-1848</span>
        </label>

        <label class="custom-control ls-checkbox">
          <span class="float-right badge badge-light round">1103</span>
          <input type="checkbox" class="material-control-input">
            <span class="material-control-indicator"></span>
            <span class="material-control-description">1849-1858</span>
        </label>

        <label class="custom-control ls-checkbox">
          <span class="float-right badge badge-light round">1574</span>
          <input type="checkbox" class="material-control-input">
            <span class="material-control-indicator"></span>
            <span class="material-control-description">1859-1868</span>
        </label>

        <label class="custom-control ls-checkbox">
          <span class="float-right badge badge-light round">2541</span>
          <input type="checkbox" class="material-control-input">
            <span class="material-control-indicator"></span>
            <span class="material-control-description">1869-1878</span>
        </label>


        <label class="custom-control ls-checkbox">
          <span class="float-right badge badge-light round">4550</span>
          <input type="checkbox" class="material-control-input">
            <span class="material-control-indicator"></span>
            <span class="material-control-description">1879-1888</span>
        </label>

        <label class="custom-control ls-checkbox">
          <span class="float-right badge badge-light round">10232</span>
          <input type="checkbox" class="material-control-input">
          <span class="material-control-indicator"></span>
          <span class="material-control-description">1889-1898</span>
        </label>

        <label class="custom-control ls-checkbox">
          <span class="float-right badge badge-light round">18155</span>
          <input type="checkbox" class="material-control-input">
          <span class="material-control-indicator"></span>
          <span class="material-control-description">1899-1908</span>
        </label>

        <label class="custom-control ls-checkbox">
          <span class="float-right badge badge-light round">29341</span>
          <input type="checkbox" class="material-control-input">
            <span class="material-control-indicator"></span>
            <span class="material-control-description">1909-1918</span>
        </label>

        <label class="custom-control ls-checkbox">
          <span class="float-right badge badge-light round">36170</span>
          <input type="checkbox" class="material-control-input">
            <span class="material-control-indicator"></span>
            <span class="material-control-description">1919-1928</span>
        </label>

        <label class="custom-control ls-checkbox">
          <span class="float-right badge badge-light round">49566</span>
          <input type="checkbox" class="material-control-input">
            <span class="material-control-indicator"></span>
            <span class="material-control-description">1929-1938</span>
        </label>



        <label class="custom-control ls-checkbox">
          <span class="float-right badge badge-light round">60152</span>
          <input type="checkbox" class="material-control-input">
            <span class="material-control-indicator"></span>
            <span class="material-control-description">1939-1948</span>
        </label>

        <label class="custom-control ls-checkbox">
          <span class="float-right badge badge-light round">82785</span>
          <input type="checkbox" class="material-control-input">
          <span class="material-control-indicator"></span>
          <span class="material-control-description">1949-1958</span>
        </label>

        <label class="custom-control ls-checkbox">
          <span class="float-right badge badge-light round">111613</span>
          <input type="checkbox" class="material-control-input">
          <span class="material-control-indicator"></span>
          <span class="material-control-description">1959-1968</span>
        </label>

        <label class="custom-control ls-checkbox">
          <span class="float-right badge badge-light round">125677</span>
          <input type="checkbox" class="material-control-input">
            <span class="material-control-indicator"></span>
            <span class="material-control-description">1969-1978</span>
        </label>

        <label class="custom-control ls-checkbox">
          <span class="float-right badge badge-light round">166842</span>
          <input type="checkbox" class="material-control-input">
            <span class="material-control-indicator"></span>
            <span class="material-control-description">1979-1988</span>
        </label>

        <label class="custom-control ls-checkbox">
          <span class="float-right badge badge-light round">176976</span>
          <input type="checkbox" class="material-control-input">
            <span class="material-control-indicator"></span>
            <span class="material-control-description">1989-1998</span>
        </label>

        <label class="custom-control ls-checkbox">
          <span class="float-right badge badge-light round">149340</span>
          <input type="checkbox" class="material-control-input">
            <span class="material-control-indicator"></span>
            <span class="material-control-description">1999-2008</span>
        </label>

        <label class="custom-control ls-checkbox">
          <span class="float-right badge badge-light round">110611</span>
          <input type="checkbox" class="material-control-input">
            <span class="material-control-indicator"></span>
            <span class="material-control-description">2009-2018</span>
        </label>

        <label class="custom-control ls-checkbox">
          <span class="float-right badge badge-light round">917</span>
          <input type="checkbox" class="material-control-input">
            <span class="material-control-indicator"></span>
            <span class="material-control-description">2019</span>
        </label>

  </div> <!-- card-body.// -->

        </div>
      </article> <!-- card-group-item.// -->


</div>

<div class="slideOutTab">
 <div>
   <p>Filter Search</p>
 </div>
</div>

  </div><!-- Content -->

标签： javascriptjqueryhtmlcssbootstrap-4

解决方案

问题1，两个块分崩离析或飘走是因为这个，

/* In grid.scss file */
@media (min-width: 768px) {
.col-md-3 {
    max-width: 25%;
    }
}

解决方案是用您想要的宽度覆盖它，

#facetsSlide {
  max-width: 300px;
}

问题 2 和 3，右侧过滤器块没有出现，因为没有为它提供媒体查询，并且我删除了一个不必要的属性，

@media (max-width: 1199.98px) {
  #facetsSlide {
    /*transform: translateX(-100%); removed */ } 
}
@media (min-width: 992px) { /* Added query */
   #facetsSlide {
     display: block;
   }
}

这是一个小提琴。我希望这是预期的结果。如果没有，请在下面评论。

推荐阅读