Question

$(function(){

  var x =  $('.my__list').children();

  for (var i = 0; i < x.length ; i += 2) {

      var windowSize = $(window).width();
      if(windowSize < 500) {
          x.slice(i,i+1).wrapAll('<div class="'+ i +'"></div>');
      }
      if(windowSize > 500) {
          x.slice(i,i+2).wrapAll('<div class="'+ i +'"></div>');
          console.log("test");
      }
  }
});

我希望在浏览器的宽度发生变化时展开我的所有列表。目前只有在用户刷新浏览器时才会更改。谢谢。

我从https://codepen.io/Kibs/pen/aNzvBG

获取来源

Answer 1

我通过使用光滑的行函数和slick.js中的一些修改来解决问题。当我在响应设置中使用它时，rows: 2到rows: 1会出现一些错误。

我从here得到答案，它对我有用：

Slick.prototype.buildRows = function() { ... }

Slick.prototype.cleanUpRows = function() { ... }

并将if条件从if（.options.rows＆gt; 1）更改为if（.options.rows＆gt; 0）

Answer 2

您可以将其挂钩到窗口调整大小事件或JQuery $(window).resize()：

$(function(){
    resizeAndWrap(); // Runs once on page load
    $(window).resize(function() {
        resizeAndWrap(); // Runs everytime window is resized
    });
});

function resizeAndWrap() {
    var x =  $('.my__list').children();

    for (var i = 0; i < x.length ; i += 2) {
        var windowSize = $(window).width();

        if(windowSize < 500) {
            x.slice(i,i+1).wrapAll('<div class="'+ i +'"></div>');
        }

        if(windowSize > 500) {
            x.slice(i,i+2).wrapAll('<div class="'+ i +'"></div>');
            console.log("test");
        }
    }
}

以下是codepen example with my changes

调整浏览器大小时展开我的轮播

2 个答案: