Question

当窗口调整到设定点以上时，我遇到了删除手风琴小部件的问题。

我正在使用jQuery 1.8.3和jQuery UI 1.9.2。

这是我的代码：

/*
* Detect browser size and add accordian on page (at load) if necessary
*/
$(document).ready(function() {
    var window_width = $(window).width();  
    if (window_width <= 767){
        $("div.innernav ul.menu").accordion({ 
            header: '.separator',
            animated: 'slide',
            event: "click",
            heightStyle: "content",
            icons: { "header": false, "headerSelected": false } ,
            collapsible: true, 
            active: false,
        });
    }
});
/*
* Detect browser size on resize and add/remove accordian
*/
$(window).resize(function() {
    var wi = $(window).width();
    if (wi <= 767){
        $("div.innernav ul.menu").accordion({ 
            header: '.separator',
            animated: 'slide',
            event: "click",
            heightStyle: "content",
            icons: { "header": false, "headerSelected": false } ,
            collapsible: true, 
            active: false,
        });
    } else if (wi >= 768){
        $("div.innernav ul.menu").accordion("destroy");
    }
});

代码有效，我的手风琴只在窗口宽度小于768px时才有效但我得到了：

Error: cannot call methods on accordion prior to initialisation; attempted to call method 'destroy'

似乎这个错误使我在页面上的其他代码bork所以我可以做到删除此错误。我是一个javascript / jQuery新手，所以非常感谢你的帮助。

非常感谢！

Answer 1

尝试将就绪功能更改为单独的功能。

在其他部分：

$("div.innernav ul.menu").empty();

然后只需将ul菜单与ready函数一样重新填充。

Answer 2

最后，我使用if语句编写函数来检查窗口小部件是否在元素上实际处于活动状态：Check if Widget is Available Before Running Jquery Function

以下是完成的代码：

$(window).load(function(){
    var element = $('div.innernav ul.menu');
    if($(window).width() < 768){
        element.accordion({ header: '.separator', animated: 'slide', event: "click", heightStyle: "content", icons: { "header": false, "headerSelected": false }, collapsible: true, active: false});
    } 
    else {
        element.accordion = false;
    }
    $(window).resize(function(){
        if($(window).width() > 767) {
            element.find('.item').removeAttr('style');
            if(element.accordion) {
                element.accordion('destroy');
                element.accordion = false;
            }
        } 
        else {
            element = $('div.innernav ul.menu');
            element.accordion({ header: '.separator', animated: 'slide', event: "click", heightStyle: "content", icons: { "header": false, "headerSelected": false }, collapsible: true, active: false});
        }
    });
});

jQuery UI手风琴销毁不起作用

2 个答案: