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

Question

我目前正在实现 accordion image slider到项目中， 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');