javascript - 尝试在不同的 HTML 断点处控制由 JQUERY 功能激活的元素可见性

Question

当页面窄于 750 像素时，我想要切换可见性的卡片。我已经弄清楚了那部分。我需要帮助控制(使用 js 或 css)的是在我自动展开页面 > 大于 750 时隐藏在小于 750 处的元素上显示 block 。我附上代码和 jsfiddle 来理解这一点。

这是 jsfiddle

https://jsfiddle.net/galnova/bjz6pgyp/16/

$('[id^="coll-"]').click(function(e) {
  e.preventDefault();
  if ($(window).width() < 750) {
    $("." + this.id).stop().slideToggle();
    return false;
  }
});

//I also tried this

I tried this but it didn't work.

$('[id^="coll-"]').click(function(e){
    e.preventDefault();
    if ($(window).width() < 750) {
        $("." + this.id).stop().slideToggle();
        return false; 
    } else if ($(window).width() > 750) {
        $(".coll-1, .coll-2, .coll-3").show();
    }
});

.coll-1,
.coll-2,
.coll-3 {
  display: block;
  background: pink;
}

#coll-1,
#coll-2,
#coll-3 {
  display: none;
}

.ful_cwrap {
  display: block;
  top: 30px;
  position: relative;
  width: 100%;
}

.cwrap {
  padding-left: 5px!important;
  padding-right: 5px!important;
}

hr {
  width: 100%;
  float: left;
}


/* .card > hr { margin: 0px 0 10px 0; } */

dl.hpair {
  float: left;
  overflow: hidden;
  margin-bottom: 0px;
}

.hpair dt,
.hpair dd {
  float: left;
  display: inline-block;
}

.hpair dt {
  margin-right: 5px;
}

.hpair dd {
  margin-right: 10px;
}

.card {
  float: left;
  width: 100%;
  border: solid 1px #000;
  padding: 0 10px 10px 10px;
  margin-bottom: 10px;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
  /*background: #eee;*/
}

span.card-title {
  font-size: 1.4em;
}

.card-title {
  margin-top: 0;
  margin-bottom: .5em;
  padding-top: 10px;
  text-align: center;
  /*padding-bottom: 10px;*/
  font-weight: 700;
  font-size: 1.143em;
  line-height: 20px;
}

.card-subtitle {
  margin-top: 0;
  margin-bottom: 0;
}

@media only screen and (max-width: 767px) {
  .coll-1,
  .coll-2,
  .coll-3 {
    display: none;
  }
  #coll-1,
  #coll-2,
  #coll-3 {
    display: block;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/2.2.4/css/bootstrap.min.css" />
<div class="ful_cwrap">
  <div class="col-xs-12 col-sm-2 cwrap">
    <div class="card card-block">
      <h4>
        Tester
      </h4>
      <div class="col-xs-12 nill">
        <dl class="hpair">
          <dt>Cash: </dt>
          <dd>Plenty Dollars</dd>
        </dl>
        <dl class="hpair">
          <dt>Names: </dt>
          <dd>Alot</dd>
        </dl>
        <dl class="hpair">
          <dt>Avg. Time: </dt>
          <dd>30 hours</dd>
        </dl>
      </div>
      <hr/>
      <div class="col-xs-12 nill">
        <p class="card-text">
          <span class="coll-1">
            Maecenas mattis purus nunc, et molestie risus porttitor a. Phasellus ex lacus, viverra sed tempus at. Vivamus congue fringilla fringilla. Pit amet semper lacus.
            </span>
        </p>
      </div>
      <div class="col-xs-12 nill mar_bott">
        <a id="coll-1" href="" class="">Show more  <span class="indicator glyphicon glyphicon-plus"></span></a>
      </div>
    </div>
  </div>

  <!-- -->

  <div class="col-xs-12 col-sm-2 cwrap">
    <div class="card card-block">
      <h4>
        Tester
      </h4>
      <div class="col-xs-12 nill">
        <dl class="hpair">
          <dt>Cash: </dt>
          <dd>Plenty Dollars</dd>
        </dl>
        <dl class="hpair">
          <dt>Names: </dt>
          <dd>Alot</dd>
        </dl>
        <dl class="hpair">
          <dt>Avg. Time: </dt>
          <dd>30 hours</dd>
        </dl>
      </div>
      <hr/>
      <div class="col-xs-12 nill">
        <p class="card-text">
          <span class="coll-2">
            Maecenas mattis purus nunc, et molestie risus porttitor a. Phasellus ex lacus, viverra sed tempus at. Vivamus congue fringilla fringilla. Pit amet semper lacus.
            </span>
        </p>
      </div>
      <div class="col-xs-12 nill mar_bott">
        <a id="coll-2" href="" class="">Show more  <span class="indicator glyphicon glyphicon-plus"></span></a>
      </div>
    </div>
  </div>

  <!-- -->

  <div class="col-xs-12 col-sm-2 cwrap">
    <div class="card card-block">
      <h4>
        Tester
      </h4>
      <div class="col-xs-12 nill">
        <dl class="hpair">
          <dt>Cash: </dt>
          <dd>Plenty Dollars</dd>
        </dl>
        <dl class="hpair">
          <dt>Names: </dt>
          <dd>Alot</dd>
        </dl>
        <dl class="hpair">
          <dt>Avg. Time: </dt>
          <dd>30 hours</dd>
        </dl>
      </div>
      <hr/>
      <div class="col-xs-12 nill">
        <p class="card-text">
          <span class="coll-3">
            Maecenas mattis purus nunc, et molestie risus porttitor a. Phasellus ex lacus, viverra sed tempus at. Vivamus congue fringilla fringilla. Pit amet semper lacus.
            </span>
        </p>
      </div>
      <div class="col-xs-12 nill mar_bott">
        <a id="coll-3" href="" class="">Show more  <span class="indicator glyphicon glyphicon-plus"></span></a>
      </div>
    </div>
  </div>

  <!-- -->

</div>

我添加了一张图片来帮助解释。

https://ibb.co/jj99w6

Answer 1

它必须正好是 750 像素吗？如果我对你的理解正确的话，bootstrap 有你想要实现的行为的类。

但是，请注意，此功能已在 bootstrap 4 中删除，但是我看到您正在使用 bootstrap 3，所以它会

hidden-xs = hidden when below 768px
hidden-sm = hidden between 768px and 992px
hidden-md = hidden between 992px and 1200px
hidden-lg = hidden when above 1200px

visible-xs-block, visible-xs-inline, visible-xs-inline-block

which will set the element to be visible in the ranges i've listed above.

There is also a really nice table and explanation on the bootstrap docs