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

当页面宽度小于750像素时，我有一些卡片需要切换可见性。我已经弄清楚了那部分。我需要控制的帮助（无论是使用js还是css）是在自动扩展页面> 750时在
这是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

最佳答案

是否一定要精确到750像素？如果我正确理解您的引导程序，则具有针对您想要实现的行为的类。

但是，请注意，此功能已在引导程序4中删除，但是我已经看到您正在使用引导程序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