Question

我有一个我正在处理的主页，它是两列宽度相等的页面，页面上有多个小部件。页面是响应式的，小部件的数量是可变的。目前我有一个非常好的解决方案，并且不使用像砌体或salvattore这样的插件。我反对使用这些插件的原因是我不希望页面是两个刚性列，我希望小部件能够流动并适应可用空间。

这让我想到了我的问题 - 我希望能够折叠任何这些小部件，其他小部件应该流动并适应剩下的空间。这是我到目前为止的原型：

http://codepen.io/charge-valtech/pen/bzJfj

这是我写的jquery：

function layoutWidgets() {
  console.log('layout widgets');
  if ($(".left-widget").css("float") == "left") {
    $('.left-widget').each(function (index, value) {
      var widgetPosition = $(this).position().left;
      if (widgetPosition >= 30) {
        $(this).removeClass('left-widget').addClass('right-widget');
      }
    });
    $('.right-widget').each(function (index, value) {
      var widgetPosition = $(this).position().left;
      if (widgetPosition <= 30) {
        $(this).removeClass('right-widget').addClass('left-widget');
      }
    });
  }
}

layoutWidgets();
$(window).resize(layoutWidgets);

$('.collapse').click(function () {
  $(this).closest('.widget').toggleClass('collapsed');
});

但出于某种原因，如果我将layoutWidgets函数放在click函数中以折叠小部件，它就不起作用。

有什么想法吗？

Answer 1

将代码放入document.ready函数中，或者在加载完所有内容后将其包含在页脚中。您不能将click事件附加到尚不存在的元素。

Answer 2

我解决这个问题的方法是在我的click函数中执行for循环，它应遍历小部件并运行layoutWidgets：

  $('.collapse-expand').click(function () {
            $(this).closest('.dashboard-panel').toggleClass('collapsed');
            var n = 7;
            for (var i = 0; i < n; i++) {
                layoutWidgets();
            }
        });

具有多个不同高度小部件的两列布局，如何使小部件可折叠并保持页面流动？

2 个答案: