Question

我目前正在为项目实施accordion image slider，滑块具有以下可选设置。

$("#accordion").awsAccordion({
    type: "horizontal",
    cssAttrsHor: {
        ulWidth: "responsive",
        liHeight: 500,
        liWidth: 50
    },
    cssAttrsVer: {
        ulWidth: "responsive"
    },
    startSlide: 2,
    openCloseHelper: {
        openIcon: "plus",
        closeIcon: "minus"
    },
    openOnebyOne: true,
    classTab: "small",
    slideOn: "click",
    autoPlay: true,
    autoPlaySpeed: 3000
})

它说的地方：类型：“水平”，我想将其更改为：type：“vertical”，当浏览器宽度低于768px时，甚至可能。

Answer 1

这可以通过使用变量

设置type属性来完成

var type = 'horizontal'; // Default type
if ($(window).width() < 768) {
    type = 'vertical'; // When window width is less than 768, make type vertical
}

$("#accordion").awsAccordion({
    type: type, // Use variable here
    ...
});

要在窗口大小调整上运行代码，可以使用resize事件。

function update() {
    var type = 'horizontal'; // Default type
    if ($(window).width() < 768) {
        type = 'vertical'; // When window width is less than 768, make type vertical
    }

    $("#accordion").awsAccordion({
        type: type, // Use variable here
        ...
    });
}

$(window).resize(update).trigger('resize');

Answer 2

尝试使其变量

$(function(){
var x;
if(window.width<786){
x = "vertical";}else{
x= "horizontal";}
});

然后按照下面的定义将代码放在此处

$("#accordion").awsAccordion({
  type: x , 
  cssAttrsHor:{
      ulWidth:"responsive",
      liHeight:500,
      liWidth:50
  },

根据浏览器宽度动态设置插件属性

2 个答案: