Question

我正在创建一个在调整浏览器窗口大小时动态调整大小的网站。这是使用CSS中的百分比来实现的。然而，我还需要我的手风琴滑块调整大小，因为浏览器窗口调整大小，我不认为可以使用CSS完成。我认为解决这个问题的最好方法是使用jQuery，但我无法弄清楚如何去做。在调整窗口大小时，如何更改滑块的高度和宽度。任何帮助将不胜感激。

该页面位于：[已删除链接]

Answer 1

没有看到你的Kwicks jquery代码很难给出一个好的答案，但据我所知，最好的办法是用JS计算当前的窗口大小，然后设置你的Kwicks手风琴的“min”大小。然后相应地刷新它。

编辑：了解更多信息ghostpool，这些内容

//after acknowledging window size change
var minsize = applicableAccordianWidth / numberOfElements;
$('.kwicks').kwicks({  
    min: minsize,  
    spacing:  5  
});

你应该能够重新初始化kwicks容器，并根据元素的大小除以手风琴中元素的数量，发送最小尺寸的选项。

Answer 2

确切的方法取决于您用于滑块的插件，但是您需要首先将函数附加到resize事件。以下是一些文档：http://api.jquery.com/resize/

一个例子：

$(function() {
    $(window).resize(function() {
        //do your resizing stuff here
        alert('You resized me!');
    });
});

Answer 3

以下代码适用于调整大小

(function ($){
  $(window).resize(function(){
     var w = $('#kwicks').width();
     var eachw = (w/5.0);
console.log(w,eachw);
     $('.kwick').css('width',eachw+'px').css('left',function(idx){return idx*eachw});
  });
})(jQuery);

但你需要告诉插件在动画时使用新值，我不知道他们是否支持这个。

调整窗口大小时调整滑块的宽度/高度

3 个答案: