Question

很抱歉，如果重复的话，我已经搜索了并且无法找到答案。

我正在使用一个插件来创建可访问的手风琴。但是，客户要求它只是小屏幕上的手风琴。这不是插件的本机功能，因此，由于我（非常）有限的技能，我正在尝试使其实现。

这是我想出的：

  $(function () {
if (matchMedia) {
    var mq = window.matchMedia("(max-width: 500px)");
    mq.addListener(WidthChange);
    WidthChange(mq);
}
function WidthChange(mq) {
    if (mq.matches) {
        $('.js-accordion').accordion();
     }
     else {
        $('.js-accordion').removeClass('accordion');
     }
}(window.jQuery)
});

当窗口缩小尺寸时，这可以正常工作；将添加“手风琴”类，该类将调用插件。但是，当窗口重新调整大小时，尽管删除了该类，但插件添加的所有HTML，ARIA等仍然存在，因此在刷新页面之前它不会转换回去。我不想刷新整个页面，只是刷新手风琴。我尝试了.load，它使整个工作停止。

这类问题的大多数答案似乎都涉及Ajax并刷新服务器中的一部分内容。我只想刷新HTML的一部分。

请原谅我的无知，我确定有一个简单的解决方案（或者可能是一种更好的解决方法），但是经过一天的努力，我仍然在扯头发。预先感谢！

Answer 1

您可以尝试执行以下操作

JAVASCRIPT

$(document).ready(function(){

    /* Trigger 1st change, maybe the window already below 500 */
    WidthChange();

    /* when window on resize */
    $(window).resize(function(){
        WidthChange();
    });

    function WidthChange() {

        $("#accordion").accordion();
        if($(window).width() > 500){
            $("#accordion").accordion("destroy");
        }else{
            $("#accordion").accordion();
        } 
    }
});

JSFiddle示例：https://jsfiddle.net/synz/8szpf1or/

在窗口调整大小时使用jQuery刷新页面的一部分

1 个答案: