如何进行jQuery媒体查询？

时间：2016-01-18 04:12:48

标签： jquery css

＆＃13;
＆＃13; 
$(document).ready(function() {
  $('#products .item').addClass('list-group-item');
  $('#list').click(function(event) {
    event.preventDefault();
    $('#products .item').addClass('list-group-item');
  });
  $('#grid').click(function(event) {
    event.preventDefault();
    $('#products .item').removeClass('list-group-item');
    $('#products .item').addClass('grid-group-item');
  });
});
＆＃13; 
.glyphicon {
  margin-right: 5px;
}
.thumbnail {
  margin-bottom: 20px;
  padding: 0px;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  border-radius: 0px;
}
.item.list-group-item {
  float: none;
  width: 100%;
  background-color: #fff;
  margin-bottom: 10px;
}
.item.list-group-item:nth-of-type(odd):hover,
.item.list-group-item:hover {
  background: #428bca;
}
.item.list-group-item .list-group-image {
  margin-right: 10px;
}
.item.list-group-item .thumbnail {
  margin-bottom: 0px;
}
.item.list-group-item .caption {
  padding: 9px 9px 0px 9px;
}
.item.list-group-item:nth-of-type(odd) {
  background: #eeeeee;
}
.item.list-group-item:before,
.item.list-group-item:after {
  display: table;
  content: " ";
}
.item.list-group-item img {
  float: left;
}
.item.list-group-item:after {
  clear: both;
}
.list-group-item-text {
  margin: 0 0 11px;
}
＆＃13; 
<link href="http://bootsnipp.com/dist/bootsnipp.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="well well-sm">
    <strong>Category Title</strong>
    <div class="btn-group">
      <a href="#" id="list" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-th-list">
            </span>List</a>  <a href="#" id="grid" class="btn btn-default btn-sm"><span
                class="glyphicon glyphicon-th"></span>Grid</a>
    </div>
  </div>
  <div id="products" class="row list-group">
    <div class="item  col-xs-4 col-lg-4">
      <div class="thumbnail">
        <img class="group list-group-image" src="http://placehold.it/400x250/000/fff" alt="" />
        <div class="caption">
          <h4 class="group inner list-group-item-heading">
                        Product title</h4>
          <p class="group inner list-group-item-text">
            Product description... Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
          <div class="row">
            <div class="col-xs-12 col-md-6">
              <p class="lead">
                $21.000</p>
            </div>
            <div class="col-xs-12 col-md-6">
              <a class="btn btn-success" href="http://www.jquery2dotnet.com">Add to cart</a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="item  col-xs-4 col-lg-4">
      <div class="thumbnail">
        <img class="group list-group-image" src="http://placehold.it/400x250/000/fff" alt="" />
        <div class="caption">
          <h4 class="group inner list-group-item-heading">
                        Product title</h4>
          <p class="group inner list-group-item-text">
            Product description... Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
          <div class="row">
            <div class="col-xs-12 col-md-6">
              <p class="lead">
                $21.000</p>
            </div>
            <div class="col-xs-12 col-md-6">
              <a class="btn btn-success" href="http://www.jquery2dotnet.com">Add to cart</a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="item  col-xs-4 col-lg-4">
      <div class="thumbnail">
        <img class="group list-group-image" src="http://placehold.it/400x250/000/fff" alt="" />
        <div class="caption">
          <h4 class="group inner list-group-item-heading">
                        Product title</h4>
          <p class="group inner list-group-item-text">
            Product description... Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
          <div class="row">
            <div class="col-xs-12 col-md-6">
              <p class="lead">
                $21.000</p>
            </div>
            <div class="col-xs-12 col-md-6">
              <a class="btn btn-success" href="http://www.jquery2dotnet.com">Add to cart</a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="item  col-xs-4 col-lg-4">
      <div class="thumbnail">
        <img class="group list-group-image" src="http://placehold.it/400x250/000/fff" alt="" />
        <div class="caption">
          <h4 class="group inner list-group-item-heading">
                        Product title</h4>
          <p class="group inner list-group-item-text">
            Product description... Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
          <div class="row">
            <div class="col-xs-12 col-md-6">
              <p class="lead">
                $21.000</p>
            </div>
            <div class="col-xs-12 col-md-6">
              <a class="btn btn-success" href="http://www.jquery2dotnet.com">Add to cart</a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="item  col-xs-4 col-lg-4">
      <div class="thumbnail">
        <img class="group list-group-image" src="http://placehold.it/400x250/000/fff" alt="" />
        <div class="caption">
          <h4 class="group inner list-group-item-heading">
                        Product title</h4>
          <p class="group inner list-group-item-text">
            Product description... Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
          <div class="row">
            <div class="col-xs-12 col-md-6">
              <p class="lead">
                $21.000</p>
            </div>
            <div class="col-xs-12 col-md-6">
              <a class="btn btn-success" href="http://www.jquery2dotnet.com">Add to cart</a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="item  col-xs-4 col-lg-4">
      <div class="thumbnail">
        <img class="group list-group-image" src="http://placehold.it/400x250/000/fff" alt="" />
        <div class="caption">
          <h4 class="group inner list-group-item-heading">
                        Product title</h4>
          <p class="group inner list-group-item-text">
            Product description... Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
          <div class="row">
            <div class="col-xs-12 col-md-6">
              <p class="lead">
                $21.000</p>
            </div>
            <div class="col-xs-12 col-md-6">
              <a class="btn btn-success" href="http://www.jquery2dotnet.com">Add to cart</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

我正在研究a snippet I found earlier。我遇到的第一个问题是，为了使这成为一个响应式解决方案，我需要将列表作为加载时的默认值，这很容易，我只想将其添加为document.ready函数的第一行：

$('#products .item').addClass('list-group-item');

但是，如果用户决定单击网格视图并更改窗口大小，该怎么办？我将如何添加list-group-item类，以便它将更改回列表视图。

1 个答案:

答案 0 :(得分：0)

我可以通过添加此窗口调整大小功能来解决它​​

$(window).on('resize', function(){
    var win = $(this);
    if (win.width() <= 767) 
    { 
        $('#products .item').addClass('list-group-item');         
    }
});
相关问题
最新问题