0

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

我正在使用 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'

似乎这个错误使我在页面上的其他代码变得笨拙，所以我可以删除这个错误。我是一个 javascript/jQuery 新手，所以非常感谢您的帮助。

非常感谢！

4

2 回答 2

2

尝试将您的就绪函数更改为单独的函数。

在 else 部分：

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

然后只需像准备功能一样重新填充 ul 菜单。

于 2013-01-11T15:16:06.737 回答
1

最后，我使用 if 语句重新编写了函数，以检查小部件是否在元素上实际处于活动状态：在运行 Jquery 函数之前检查小部件是否可用

这是完成的代码：

$(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});
        }
    });
});
于 2013-01-11T15:49:58.867 回答